Foundations

Responsive charts

Fluid widths with SSR-safe initial dimensions.

Container-driven width

Set responsive and provide initialWidth for SSR / first paint. The chart then follows its parent with ResizeObserver.

Resize the container — the chart follows available width.

tsx

<LineChart
data={data}
xKey="month"
    xScale="point"
series={[{ key: "revenue", label: "Revenue" }]}
height={200}
initialWidth={480}
responsive
showGrid
tooltip
/>

Practical tips

Keep a stable height to avoid layout jumps while width changes.
Avoid nesting charts inside overflow: hidden containers if tooltips must escape.
On mobile, prefer full-bleed single-column layouts and shorter tick labels.