Pie Chart
Shares of a single whole.
Introduction
A pie encodes value as angle, which people read less accurately than length.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Applications by channel
How applications reached the department.
| Category | Applications |
|---|---|
| Online | 5820 |
| Seva Kendra | 2410 |
| Post | 640 |
| Walk-in | 1130 |
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
labels: ['Online', 'Seva Kendra', 'Post', 'Walk-in'],
datasets: [{ label: 'Applications', data: [5820, 2410, 640, 1130] }],
}),
[],
);
return (
<Chart
type='pie'
data={data}
title='Applications by channel'
summary='How applications reached the department.'
height={300}
className='max-w-[420px]'
/>
);
}When to use it
Use it for a handful of slices where the reader only needs the rough shape — "most applications arrive online". If they need to compare slices precisely, or there are more than about five, use a bar chart instead.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.