Why SVG-first matters

Every charting library makes a rendering choice. Most default to Canvas. Some use WebGL. Chart.ts defaults to SVG - and we think that's the right call for 95% of use cases.

SVG is DOM

When a chart renders as SVG, every element - every bar, line, axis label, tooltip trigger - is a real DOM node. This has profound implications:

• CSS works. You can style chart elements with Tailwind classes, CSS custom properties, or plain stylesheets. dark: variants work. Media queries work. Transitions work.
• Accessibility works. Screen readers can traverse SVG. ARIA attributes work. Keyboard navigation works. You get accessibility for free, not as an expensive add-on.
• SSR works. SVG renders on the server. Your charts appear in the initial HTML. No layout shift. No loading spinners. No hydration flash.
• DevTools work. Inspect elements. Debug layout issues. Modify styles live. The same workflow you use for every other part of your UI.

When SVG isn't enough

SVG hits a wall around 10,000 data points. At that scale, the DOM becomes a bottleneck - too many nodes, too much memory, layout calculations grind to a halt.

This is where Chart.ts's multi-renderer architecture kicks in:

| Data points | Renderer | Why | |---|---|---| | < 10,000 | SVG | Full DOM benefits, zero compromise | | 10k – 100k | Canvas | Hardware-accelerated 2D, batched draws | | 100k+ | WebGL | GPU-powered, millions of points at 60fps |

The switch is automatic. Same API. Same props. Same output. Chart.ts detects the data size and picks the optimal renderer. You can also force a specific renderer with the renderer prop.

// Auto (recommended)
<LineChart data={bigData} x="time" y="value" />
 
// Force Canvas
<LineChart data={bigData} x="time" y="value" renderer="canvas" />
 
// Force WebGL
<LineChart data={hugeData} x="time" y="value" renderer="webgl" />

The best of all worlds

Most charting libraries make you choose: SVG (nice DX, slow at scale) or Canvas (fast, terrible DX). Chart.ts gives you both - SVG when it's the right tool, Canvas/WebGL when you need the performance.

Your charts start as accessible, styleable, inspectable SVG. When your data grows, they seamlessly upgrade to Canvas or WebGL. No code changes. No migration. No compromise.

That's what SVG-first means.