Pie Chart Maker

Build stunning pie charts with Chart.ts. SVG rendering means every slice is a real DOM element you can style with Tailwind CSS. Add labels, percentages, legends, donut variants, and pattern fills for accessibility. Under 15kb for the entire library.

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

const svg = pie({
  data: [
    { label: "Chrome", value: 65 },
    { label: "Safari", value: 19 },
    { label: "Firefox", value: 8 },
    { label: "Edge", value: 5 },
    { label: "Other", value: 3 },
  ],
  label: "label",
  value: "value",
  showPercentages: true,
  showLegend: true,
})

Features

SVG rendering with gradient fills
Labels, percentages, and legends
Donut variant with configurable inner radius
Pattern fills for color-blind accessibility
Tailwind className on every slice
Dark mode with dark: variants
Under 3kb tree-shaken
Read the DocsSee DemosExamples