React Area Chart

Chart.ts gives you a drop-in React area chart that renders as SVG. Gradient fills, stacked series, smooth curves, and Tailwind CSS on every element. Works in Server Components with zero client JS.

$npm install @chartts/react
example.tsx
import { AreaChart } from "@chartts/react"

export function TrafficChart() {
  const data = [
    { month: "Jan", organic: 1200, paid: 800 },
    { month: "Feb", organic: 1800, paid: 950 },
    { month: "Mar", organic: 2400, paid: 1100 },
    { month: "Apr", organic: 3100, paid: 1400 },
  ]

  return (
    <AreaChart
      data={data}
      x="month"
      y={["organic", "paid"]}
      stacked
      className="h-64"
      areaClassName="fill-cyan-400/20 dark:fill-cyan-300/10"
    />
  )
}

Features

Gradient fills and stacked areas
SVG rendering with real DOM elements
Smooth curves with configurable tension
Multi-series with automatic legends
Tailwind className on areas, lines, axes
Works in React Server Components
Under 3kb tree-shaken
Read the DocsSee DemosExamples