Dark Mode Charts

Name: Chart.ts
Author: Chart.ts

Charts that respond to Tailwind dark mode. Same data, different aesthetic. All Chart.ts charts adapt automatically.

Revenue Trend

Implementation

dashboard.tsx

import { LineChart, BarChart, PieChart, ScatterChart } from "@chartts/react"

// All Chart.ts charts automatically adapt to Tailwind dark mode.
// No extra config needed - they read CSS custom properties.

<div className="grid grid-cols-2 gap-6">
  <LineChart
    data={revenue}
    x="month" y="revenue"
    className="h-64 bg-white dark:bg-zinc-950 rounded-xl p-4"
  />
  <BarChart
    data={categories}
    x="name" y="value"
    className="h-64 bg-white dark:bg-zinc-950 rounded-xl p-4"
  />
  <PieChart data={dist} value="usage" label="name" className="h-72" />
  <ScatterChart data={corr} x="x" y="y" className="h-72" />
</div>

← All examples