---
title: "DonutChart"
description: "Part of a whole, with the total in the middle. Name the slices with a ChartLegend beside it; the tooltip gives each value and share."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DonutChart

## Appointments by status

```tsx
import { ChartLegend, ChartPanel, DonutChart } from '@arbol-ai/ui/charts';
import type { DonutSlice } from '@arbol-ai/ui/charts';

const BY_STATUS: DonutSlice[] = [
  { label: 'Attended', value: 182, color: 'chart-positive' },
  { label: 'Rescheduled', value: 31, color: 'chart-2' },
  { label: 'Cancelled', value: 24, color: 'chart-caution' },
  { label: 'No-show', value: 11, color: 'chart-negative' },
];

<ChartPanel
  eyebrow="This week"
  legend={<ChartLegend items={BY_STATUS.map(({ label, color = 'chart-1' }) => ({ label, color }))} />}
  title="Appointments by status"
>
  <DonutChart
    aria-label="Appointments by status"
    data={BY_STATUS}
    height={220}
    totalLabel="appointments"
  />
</ChartPanel>
```

## Source

The examples above are [`src/charts/donut-chart.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/donut-chart.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/donut-chart/index.mdx