Next.js Charts

Chart.ts renders as SVG, which means charts work in React Server Components. Ship zero client-side JavaScript for static charts. Add interactivity with Client Components when you need it.

$npm install @chartts/react
example.tsx
// app/dashboard/page.tsx (Server Component)
import { BarChart } from "@chartts/react"
import { getMetrics } from "@/lib/data"

export default async function Dashboard() {
  const metrics = await getMetrics()

  return (
    <BarChart
      data={metrics}
      x="month"
      y="sales"
      className="h-64"
      barClassName="fill-cyan-500"
    />
  )
}
// Zero client JS. Chart renders on the server as SVG HTML.

Features

Works in React Server Components
Zero client JS for static charts
Streams with Next.js Suspense
Tree-shakeable imports
Tailwind CSS integration
App Router and Pages Router support
Static export compatible
Read the DocsSee DemosExamples