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 { createChart } from "@gocharting/chart-sdk";
 
// Just create - AutoFit handles sizing automatically!
const chart = createChart("#chart-container", {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	licenseKey: "your-license-key",
	// autosize: true (enabled by default)
});

How It Works

1. Automatic CSS Injection

AutoFit automatically injects optimized CSS styles:

.gocharting-autofit-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: auto;
}

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) {
		const parts = String(symbolName).split(":");
		const exchange = parts[0] || "NASDAQ";
		const segment = parts.length >= 3 ? parts[1] : "EQUITY";
		const symbol = parts[parts.length - 1] || "AAPL";
		const name = symbol;
		const validIntervals = ["1m", "5m", "15m", "1h", "1D"];
		onResolve({
			exchange,
			segment,
			symbol,
			name,
			asset_type: "EQUITY",
			source_id: symbol,
			tradeable: true,
			is_index: false,
			is_formula: false,
			delay_seconds: 0,
			data_status: "streaming",
			contract_size: 1,
			tick_size: 0.01,
			display_tick_size: 0.01,
			volume_size_increment: 1,
			max_tick_precision: 2,
			max_volume_precision: 0,
			quote_currency: "USD",
			supports: { footprint: false },
			exchange_info: {
				name: exchange.toLowerCase(),
				code: exchange,
				country_cd: "US",
				zone: "America/New_York",
				hours: [
					{ open: false },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: true },
					{ open: false },
				],
				valid_intervals: validIntervals,
			},
			ticker: symbol,
			full_name: `${exchange}:${segment}:${symbol}`,
			description: name,
			type: "stock",
			session: "0930-1600",
			timezone: "America/New_York",
			has_intraday: true,
			has_daily: true,
			supported_resolutions: validIntervals,
		});
	},
};
 
const chart = new ProfessionalChart({
	container: document.getElementById("chart"),
	datafeed: myDatafeed,
	width: "100%",
	height: 600,
});

After (Composition-based with AutoFit)

import { createChart } from "@gocharting/chart-sdk";
 
const myDatafeed = {
	async getBars(symbolInfo, resolution, periodParams) {
		// Same implementation
	},
};
 
const chart = createChart("#chart-container", {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	licenseKey: "your-license-key",
	// AutoFit handles sizing automatically!
});

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
Mobile IntegrationCodePen Integration