React Pie Chart

A lightweight React pie chart component. Renders as SVG with real DOM elements so you can style it with Tailwind, inspect it in DevTools, and get accessibility for free.

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

export function MarketShare() {
  const data = [
    { name: "Chrome", share: 65 },
    { name: "Safari", share: 19 },
    { name: "Firefox", share: 8 },
    { name: "Edge", share: 5 },
    { name: "Other", share: 3 },
  ]

  return (
    <PieChart
      data={data}
      label="name"
      value="share"
      className="h-72"
    />
  )
}

Features

SVG rendering with gradient fills
Labels, percentages, and legends
Tailwind className on slices and labels
Dark mode support
Donut variant with inner radius
Screen reader accessible
Under 3kb tree-shaken
Read the DocsSee DemosExamples