Baby Baltazar

Pie Chart

A generic pie/donut chart component with configurable segments.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/pie-chart.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Usage

How to use this component in your code.

<PieChart
  data={[
    { name: 'spotify', value: 400 },
    { name: 'apple', value: 300 },
    { name: 'youtube', value: 200 },
  ]}
  config={{
    spotify: { label: 'Spotify', color: 'var(--chart-1)' },
    apple: { label: 'Apple Music', color: 'var(--chart-2)' },
    youtube: { label: 'YouTube', color: 'var(--chart-3)' },
  }}
  innerRadius={60}
  showLegend
  centerValue="900"
  centerLabel="Total"
/>