Dark Mode Charts

Dark mode charts without a theming system. Chart.ts accepts Tailwind CSS classes on every element. Use dark: variants on lines, bars, axes, and labels. Toggle dark mode site-wide and charts follow automatically.

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

// Toggle your site's dark mode. Charts follow automatically.
// No theme config. No runtime color switching. Just CSS.

Features

Tailwind dark: variants on every element
No separate theming system
No runtime color switching
Charts follow site-wide dark mode toggle
Works with next-themes, nuxt-color-mode, etc.
Custom color schemes with Tailwind design tokens
CSS transitions between light and dark
Read the DocsSee DemosExamples