Documentation
NativeTailwind CSS
className prop on every element. dark: variants. Your design tokens, your CSS. Charts that match your app.
className everywhere
Every chart component and sub-element exposes a className prop. Apply Tailwind utilities directly to chart lines, bars, axes, labels, tooltips, and legends. No wrapper divs, no style objects, no CSS-in-JS.
Dark mode
Tailwind's dark: variant works on every chart element. Switch your app to dark mode and charts follow automatically. Or use different color schemes per theme - it's just CSS classes.
Design tokens
Chart.ts uses your Tailwind config. Colors, fonts, spacing - everything comes from your design tokens. Charts look like they belong in your app because they use the same design system.
Example
<LineChart data={data} x="month" y="revenue" className="rounded-xl" lineClassName="stroke-cyan-400 dark:stroke-cyan-300" axisClassName="text-zinc-500 dark:text-zinc-400" />