Responsive Design

Radiant Charts automatically adapts to its container size using a ResizeObserver. Charts re-render at the new dimensions without any manual intervention — labels are re-measured, legends re-paginated, and the canvas resolution adjusted for crisp rendering.

How It Works

When <RadiantChart> mounts, it attaches a ResizeObserver to its container <div>. Every time the container's dimensions change, the engine calls performLayout() → render()with the new width and height. The canvas element's internal resolution is set to match the container's clientWidth and clientHeight, multiplied by devicePixelRatio for Retina displays.

Sizing the Chart

Fixed Height

The simplest approach: pass a numeric height in pixels. Width defaults to 100% of the parent container.

<RadiantChart options={options} height={400} />

Percentage Height

Pass height="100%" to fill the parent. The parent must have a defined height (e.g. via CSS height or flex) — otherwise the chart collapses to zero height.

<div style={{ height: '60vh' }}>
  <RadiantChart options={options} height="100%" />
</div>

CSS Grid / Flexbox

In a CSS Grid or Flexbox layout, let the chart fill its grid cell. The ResizeObserver handles the rest:

<div className="grid grid-cols-2 gap-4 h-[500px]">
  <RadiantChart options={chartA} height="100%" />
  <RadiantChart options={chartB} height="100%" />
</div>

Label Collision Pruning

When the chart is too narrow to fit all axis labels, the engine automatically prunes overlapping labels. It estimates each label's width using the font size and character count, then skips labels that would overlap the previous one. Tick marks and grid lines are still drawn for pruned labels — only the text is hidden.

Legend Pagination

When a chart has many series, the legend may not fit in the available space. The legend automatically paginates: items are row-wrapped by width, then chunked into pages. Arrow buttons appear to navigate between pages. This ensures the legend never overlaps the chart area, even on small screens.

Mobile Considerations

• Touch interaction: Tooltips and crosshairs respond to touch events. Tap to show, tap elsewhere to dismiss.
• Minimum padding: The chart reserves at least 8px of padding on all sides. On very small containers, the chart area may be too small to render meaningful data — consider setting a min-width or min-height on the container.
• Toolbar visibility:The export toolbar (download button) appears on hover. On touch devices, it's visible by default since there is no hover state.

Server-Side Rendering

The <RadiantChart> component renders a plain <div> during SSR. The canvas is only created after mount in useLayoutEffect. A requestAnimationFrame defers the first paint until the container has real dimensions, avoiding a 0x0 canvas flash.

Next Steps

• Core Concepts — The rendering pipeline, scene graph, and scale system.
• Performance — Optimisation for large datasets and real-time streaming.
• Theming — Light, dark, and system themes.