React Line Chart

Chart.ts gives you a drop-in React line chart component that renders as SVG. Style it with Tailwind classes, use it in Server Components, and ship under 15kb gzipped.

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

export function RevenueChart() {
  const data = [
    { month: "Jan", revenue: 4200 },
    { month: "Feb", revenue: 5800 },
    { month: "Mar", revenue: 7100 },
    { month: "Apr", revenue: 6800 },
    { month: "May", revenue: 9200 },
  ]

  return (
    <LineChart
      data={data}
      x="month"
      y="revenue"
      className="h-64"
      lineClassName="stroke-cyan-400"
      areaClassName="fill-cyan-400/10"
    />
  )
}

Features

SVG rendering with real DOM elements
Tailwind className on every element
Dark mode with dark: variants
Works in React Server Components
TypeScript with full type inference
Accessible by default (keyboard nav, screen readers)
Under 3kb for just the line chart (tree-shaking)
Read the DocsSee DemosExamples