Donut Chart

A pie chart with a hole in the middle. Chart.ts donut charts support center labels for KPI display, configurable inner radius, animated transitions, and Tailwind CSS styling on every slice.

$npm install @chartts/core
example.tsx
import { donut } from "@chartts/core"

const svg = donut({
  data: [
    { source: "Organic", visits: 4500 },
    { source: "Paid", visits: 2800 },
    { source: "Social", visits: 1200 },
    { source: "Direct", visits: 900 },
    { source: "Referral", visits: 600 },
  ],
  label: "source",
  value: "visits",
  innerRadius: 0.6,
  centerLabel: "10,000",
  centerSubLabel: "Total Visits",
})

Features

Configurable inner radius
Center label for KPI display
Percentage labels on slices
Legend with toggle interaction
Pattern fills for accessibility
SVG rendering with Tailwind CSS
Under 3kb tree-shaken
Read the DocsSee DemosExamples