Tailwind CSS Charts

Chart.ts is the only charting library where every element accepts Tailwind CSS classes. Dark mode with dark: variants. Your design tokens, your colors, your charts. No separate theme config.

$npm install @chartts/react
example.tsx
<LineChart
  data={data}
  x="month"
  y="revenue"
  className="h-64 rounded-xl"
  lineClassName="stroke-cyan-400 dark:stroke-cyan-300"
  areaClassName="fill-cyan-400/10 dark:fill-cyan-300/5"
  dotClassName="fill-white dark:fill-zinc-900 stroke-cyan-400"
  axisClassName="text-zinc-500 dark:text-zinc-400"
  gridClassName="stroke-zinc-200 dark:stroke-zinc-800"
  tooltipClassName="bg-white dark:bg-zinc-900 shadow-lg rounded-lg"
/>

Features

className prop on every chart element
Dark mode with dark: variants
Your Tailwind design tokens work
No separate theming system to learn
Responsive with Tailwind breakpoints
CSS transitions and animations
Works with Tailwind v3 and v4
Read the DocsSee DemosExamples