Performance

Radiant Charts is built on a pure HTML5 Canvas engine — no SVG, no DOM nodes per data point. This architecture gives it a fundamental performance advantage for large datasets, real-time streaming, and animation-heavy dashboards.

Why Canvas?

SVG-based charting libraries create one DOM element per data point. A scatter plot with 10,000 points means 10,000 <circle> elements, each triggering layout, paint, and composite passes in the browser. Canvas draws everything to a single bitmap — the browser sees one element regardless of how many data points are rendered.

Large Dataset Strategies

Data Windowing

For datasets exceeding 50,000 points, consider passing only the visible window of data to the chart. Combine this with pan/zoom interaction to let users explore the full range without loading everything at once.

const visibleData = fullData.slice(startIndex, endIndex);

<RadiantChart
  options={{
    data: visibleData,
    series: [{ type: 'line', xKey: 'time', yKey: 'value' }],
  }}
  height={400}
/>

Streaming with appendData

For real-time dashboards that receive data continuously, use the imperative appendData method instead of replacing the entire data array. This pushes new records into an internal buffer and triggers processData → performLayout → render without a React re-render, making it safe to call at 60 fps.

const chartRef = useRef<RadiantChartHandle>(null);

useEffect(() => {
  const ws = new WebSocket('wss://data-feed.example.com');
  ws.onmessage = (event) => {
    const point = JSON.parse(event.data);
    chartRef.current?.appendData([point], 500); // keep last 500 points
  };
  return () => ws.close();
}, []);

<RadiantChart ref={chartRef} options={baseOptions} height={400} />

Disable Animations for Bulk Updates

Animations add visual polish but cost frame time. When updating the chart many times per second (e.g. streaming), disable animations to maximise throughput:

options={{
  data,
  series: [{ type: 'line', xKey: 'time', yKey: 'value' }],
  animation: { enabled: false },
}}

Object Pooling

Series implementations in Radiant Charts reuse scene-graph shape objects between render cycles. Instead of clearing all shapes and recreating them, the engine:

1. Stops any in-flight animation on the existing shape.
2. Reads the shape's current position as the animation start point.
3. Updates the shape's target position with the new data values.
4. Only creates new shapes when the data array grows, and removes excess shapes when it shrinks.

This avoids garbage-collection pressure from rapid object creation and enables smooth animation re-targeting — a shape mid-animation transitions seamlessly to its new target rather than snapping to the old target before animating to the new one.

PNG Export

The exportToPng() method on the chart ref triggers a client-side PNG download. The canvas background is always opaque (synced from the theme) so exported images never have a transparent background.

const chartRef = useRef<RadiantChartHandle>(null);

<button onClick={() => chartRef.current?.exportToPng('my-chart')}>
  Download PNG
</button>

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

Next Steps

• Core Concepts — The rendering pipeline and scene graph architecture.
• Responsive Design — How charts adapt to container size changes.
• Live Demos — Try the 2K / 10K / 50K row size toggles on any chart demo to see performance in action.