Doughnut Chart
Shares of a whole, with room in the middle.
Introduction
A doughnut is a pie with the centre removed, which gives you somewhere to put the total.
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
Verifications by document type
Share of identity verifications by the document used.
| Category | Verifications |
|---|---|
| Aadhaar | 4820 |
| PAN | 2310 |
| DigiLocker | 1980 |
| Voter ID | 940 |
| Passport | 410 |
'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: ['Aadhaar', 'PAN', 'DigiLocker', 'Voter ID', 'Passport'],
datasets: [{ label: 'Verifications', data: [4820, 2310, 1980, 940, 410] }],
}),
[],
);
return (
<Chart
type='doughnut'
data={data}
title='Verifications by document type'
summary='Share of identity verifications by the document used.'
height={300}
className='max-w-[420px]'
/>
);
}When to use it
The same caution as the pie applies. Its advantage is the hole: a total or headline figure in the centre often carries more than the slices do.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.