Skip to Content
GuidesAuto-fit & Responsive

🚀 Built-in AutoFit Guide

The GoCharting SDK now includes built-in AutoFit functionality that makes chart sizing bulletproof and completely automatic. No more CSS headaches, no more sizing issues - just perfect charts that work everywhere.

✨ What is AutoFit?

AutoFit is a comprehensive sizing solution that:

  • 🎯 Automatically detects container dimensions and fits charts perfectly
  • 📱 Responds to window resizing in real-time using ResizeObserver
  • 🛡️ Handles all edge cases like zero dimensions, missing containers, etc.
  • 🎨 Injects CSS automatically so you don’t need external stylesheets
  • ⚡ Works out of the box with zero configuration required

🎉 Key Benefits

Before AutoFit (Old Way)

// ❌ Complex setup required
import { ProfessionalChart } from "@gocharting/chart-sdk";
import "./chart-styles.css"; // External CSS needed
 
// Manual container setup
const container = document.getElementById("chart");
container.style.width = "100%";
container.style.height = "600px";
container.style.position = "relative";
 
// Manual resize handling
window.addEventListener("resize", () => {
	chart.resize();
});
 
// Chart creation
const chart = new ProfessionalChart({
	container: container,
	width: container.offsetWidth,
	height: container.offsetHeight,
	// ... other options
});

After AutoFit (New Way)

// ✅ Simple, bulletproof setup
import { ProfessionalChart, React, ReactDOM } from "@gocharting/chart-sdk";
 
// Just create and render - AutoFit handles everything!
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	// autosize: true (enabled by default)
});
 
ReactDOM.render(chart, document.getElementById("chart-container"));

🔧 How It Works

1. Automatic CSS Injection

AutoFit automatically injects optimized CSS styles:

.gocharting-autofit-container {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 300px;
	max-height: 100vh;
	min-width: 300px;
	/* ... more bulletproof styles */
}

2. Smart Dimension Detection

// AutoFit automatically:
const rect = container.getBoundingClientRect();
const width = rect.width || container.offsetWidth || 800;
const height = rect.height || container.offsetHeight || 500;
 
// Validates dimensions
if (width < 300) width = 300;
if (height < 300) height = 300;

3. ResizeObserver Integration

// Real-time responsive behavior
const resizeObserver = new ResizeObserver((entries) => {
	for (const entry of entries) {
		const { width, height } = entry.contentRect;
		updateChartDimensions(width, height);
	}
});

📋 Configuration Options

// AutoFit enabled by default
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
});

Custom Configuration

const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
 
	// AutoFit options
	autosize: true, // Enable/disable AutoFit (default: true)
	width: "100%", // Override width (AutoFit still applies)
	height: 600, // Override height (AutoFit still applies)
	className: "my-chart", // Additional CSS class
 
	// Container styling
	style: {
		border: "1px solid #ddd",
		borderRadius: "8px",
	},
});
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	autosize: false, // Disable AutoFit
	width: 800, // Manual width
	height: 600, // Manual height
});

🎯 Best Practices

✅ Do This

<!-- Simple container - AutoFit handles the rest -->
<div id="chart-container"></div>
// Let AutoFit do its magic
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
});
 
ReactDOM.render(chart, document.getElementById("chart-container"));

❌ Avoid This

<!-- Don't override AutoFit styles -->
<div
	id="chart-container"
	style="width: 800px !important; height: 600px !important;"
></div>
// Don't disable AutoFit unless absolutely necessary
const chart = React.createElement(ProfessionalChart, {
	autosize: false, // ❌ Loses all AutoFit benefits
	width: 800,
	height: 600,
});

🛠️ Advanced Usage

Custom Container Styling

/* You can still add custom styles */
#my-chart-container {
	border: 2px solid #007bff;
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 20px;
}

Responsive Breakpoints

/* AutoFit works with media queries */
@media (max-width: 768px) {
	#chart-container {
		height: 400px; /* AutoFit will adapt */
	}
}
 
@media (max-width: 480px) {
	#chart-container {
		height: 300px; /* AutoFit will adapt */
	}
}

Multiple Charts

// Each chart gets its own AutoFit instance
const chart1 = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "AAPL",
});
 
const chart2 = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "MSFT",
});
 
ReactDOM.render(chart1, document.getElementById("chart1"));
ReactDOM.render(chart2, document.getElementById("chart2"));

🔍 Troubleshooting

Chart Not Sizing Correctly

// Check container exists
const container = document.getElementById("chart-container");
if (!container) {
	console.error("Chart container not found!");
}
 
// Check container has dimensions
const rect = container.getBoundingClientRect();
console.log("Container dimensions:", rect.width, "x", rect.height);

AutoFit Not Working

// Verify AutoFit is enabled
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	autosize: true, // Explicitly enable
});

Performance Issues

// AutoFit is optimized, but you can monitor performance
console.time("Chart Render");
ReactDOM.render(chart, container);
console.timeEnd("Chart Render");

🎉 Migration from Old Approach

Before (Manual sizing)

import { ProfessionalChart } from "@gocharting/chart-sdk";
 
const myDatafeed = {
	async getBars(symbolInfo, resolution, periodParams) {
		// Implementation
		return { bars };
	},
	resolveSymbol(symbolName, onResolve, onError) {
		// Implementation
		onResolve(symbolInfo);
	},
};
 
const chart = new ProfessionalChart({
	container: document.getElementById("chart"),
	datafeed: myDatafeed,
	width: "100%",
	height: 600,
});

After (Composition-based with AutoFit)

import { ProfessionalChart, React, ReactDOM } from "@gocharting/chart-sdk";
 
const myDatafeed = {
	async getBars(symbolInfo, resolution, periodParams) {
		// Same implementation
	},
};
 
const chart = React.createElement(ProfessionalChart, {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	// AutoFit handles sizing automatically!
});
 
ReactDOM.render(chart, document.getElementById("chart-container"));

🚀 What’s Next?

AutoFit is just the beginning! Future enhancements include:

  • 🎨 Theme-aware sizing - Different dimensions for light/dark themes
  • 📊 Content-aware sizing - Automatic sizing based on chart content
  • 🔧 Advanced responsive modes - Breakpoint-specific configurations
  • ⚡ Performance optimizations - Even faster resize handling

Ready to experience bulletproof chart sizing? AutoFit is enabled by default in all new ProfessionalChart instances! 🎉

Last updated on
ConfigurationCodePen Integration