Pie Chart

Charts
Data Visualization

Visualize proportional data with interactive pie and donut charts.

Preview

Pie chart and donut variant

Time by Project

This week's breakdown

Marketing Strategy
45 hrs
Content Pipeline
32 hrs
Product Launch
18 hrs
Team Operations
12 hrs
Other
5 hrs

Task Status

Current sprint progress

47%
Complete
Completed
45
In Progress
28
Pending
15
Blocked
8

Legend Positions

Legend placement options

Browser Market Share

Website visitors

Chrome
65.2%
Safari
18.5%
Firefox
8.3%
Edge
5.1%
Other
2.9%

Tasks by Category

This month

Development
42 tasks
Design
28 tasks
Meetings
18 tasks
Planning
15 tasks
Research
12 tasks
Admin
8 tasks

Standalone Chart

PieChart without card wrapper

Marketing Strategy
45 hrs
Content Pipeline
32 hrs
Product Launch
18 hrs
Team Operations
12 hrs
Other
5 hrs

Props

Component API reference

PieChart

PropTypeDefaultDescription
data*Record<string, unknown>[]—Data array with value, label, and optional color
valueKey*string—Key for value in data objects
labelKey*string—Key for label in data objects
sizenumber200Chart diameter in pixels
donutbooleanfalseEnable donut variant
donutWidthnumber40Width of donut ring
centerContentReactNode—Content for donut center
formatValue(v: number) => string—Value formatter for tooltips
onSliceClick(slice) => void—Slice click handler

PieChartCard

PropTypeDefaultDescription
title*string—Card title
subtitlestring—Card subtitle
legendPosition'top' | 'right' | 'bottom' | 'left''right'Legend placement

Usage

Import and implementation examples

import { PieChart, PieChartCard } from '@/blocks/charts/pie-chart'

// Basic pie chart
<PieChart
  data={[
    { label: 'Category A', value: 45, color: 'var(--color-indigo-500)' },
    { label: 'Category B', value: 30, color: 'var(--color-teal-500)' },
    { label: 'Category C', value: 25, color: 'var(--color-amber-500)' },
  ]}
  valueKey="value"
  labelKey="label"
  size={200}
/>

// Donut chart with center content
<PieChart
  data={data}
  valueKey="count"
  labelKey="status"
  donut
  donutWidth={40}
  centerContent={
    <div>
      <div className="text-2xl font-bold">75%</div>
      <div className="text-xs">Complete</div>
    </div>
  }
/>

// Pie chart in card with legend
<PieChartCard
  title="Time by Project"
  subtitle="This week"
  data={projectData}
  valueKey="hours"
  labelKey="project"
  formatValue={(v) => `${v} hrs`}
  legendPosition="right"
/>

Features

Built-in functionality

  • Animated entry: Smooth slice animation on mount
  • Interactive hover: Slice highlights on hover
  • Donut variant: Center hole with custom content
  • Legend positions: Top, right, bottom, left placement
  • Value formatting: Custom format for percentages/values
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="img" for chart containeraria-label describes chart contentSlices have tooltips with values

Keyboard Navigation

KeyAction
TabFocus chart (if interactive)
EnterActivate slice click handler

Notes

  • Legend provides text alternative
  • Percentages shown for each slice
  • Color is supplemented with labels

Related Components

Circle ProgressFunnel ChartBar Chart