React Donut Chart

A lightweight React donut chart with configurable inner radius, center stats, animated transitions, and Tailwind CSS styling. Renders as SVG with full screen reader support.

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

export function BudgetDonut() {
  const data = [
    { category: "Housing", amount: 1800 },
    { category: "Food", amount: 600 },
    { category: "Transport", amount: 400 },
    { category: "Savings", amount: 500 },
    { category: "Other", amount: 300 },
  ]

  return (
    <DonutChart
      data={data}
      label="category"
      value="amount"
      className="h-72"
      innerRadius={0.6}
      centerLabel="$3,600"
      centerSubLabel="Monthly"
    />
  )
}

Features

Configurable inner radius
Center label and stat display
Animated slice transitions
Pattern fills for color-blind users
Tailwind className on slices and labels
Screen reader accessible
Under 3kb tree-shaken
Read the DocsSee DemosExamples