Default

SVG Rendering

Chart.ts renders real SVG DOM elements. Inspect them. Style them. They're accessible, SSR-ready, and crisp at every zoom level.

Real DOM elements

Every chart renders as structured SVG inside your document. Open devtools and inspect individual bars, lines, labels, and axes. They're real elements with real attributes - not pixels on a canvas.

CSS styleable

SVG elements accept CSS styles. Use Tailwind classes directly on chart elements. Apply dark: variants. Override colors, fonts, strokes, and animations with standard CSS. No proprietary theming API to learn.

Screen reader accessible

SVG elements support ARIA attributes natively. Chart.ts adds role, aria-label, and descriptive text to every chart region. Screen readers can navigate chart data points, read values, and understand trends.

Resolution independent

SVG scales infinitely without quality loss. Charts look sharp on retina displays, 4K monitors, printed documents, and any zoom level. No blurry edges, no pixelation.

Server rendering

SVG is just markup. It renders on the server identically to the client. No hydration mismatch, no flash of unstyled content. Works with React Server Components, Astro, and any SSR framework.

Related