DonutChart

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>