Donut Chart

Part-to-whole for a few categories as a ring, with a center total and legend.

Import

import { DonutChart } from '@marbleui/ui'

Props

<DonutChart>

Prop	Type	Default	Description
data *required	`PieDatum[]`	`—`
summary *required	`string`	`—`
center	`ReactNode`	`—`	Center content; defaults to the total.
centerLabel	`string`	`'Total'`
className	`string`	`—`
description	`ReactNode`	`—`
size	`number`	`—`
thickness	`'regular' \| 'thin'`	`'regular'`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`formatCompact`

Usage notes

A pie with a hole, so the middle can show the total or a headline figure. Ordering, colors, legend and table work as in PieChart.

<DonutChart
  title="Cloud spend"
  summary="Cloud spend was $8.6K this month: compute 56%, storage 23%, bandwidth 14%, support 7%."
  data={spend}
  valueFormat={(n) => `$${(n / 1000).toFixed(1)}K`}
  centerLabel="This month"
/>

By default the center shows the sum of data, formatted with valueFormat (compact by default, like the tooltip and table), above centerLabel (default “Total”). center replaces both with your own node.
thickness is regular (default) or thin. size is a fixed pixel diameter, default 200.
Tooltips are pointer-only and the center text is inside the chart image, so include the total and shares in summary.

Example source · show

import { DonutChart } from './donut-chart'

const spend = [
  { label: 'Compute', value: 4820 },
  { label: 'Storage', value: 1960 },
  { label: 'Bandwidth', value: 1210 },
  { label: 'Support', value: 600 },
]
const money = (n: number) => `$${(n / 1000).toFixed(1)}K`

export const styles = {
  Regular: () => <DonutChart title="Cloud spend" summary="Cloud spend $8.6K: compute 56%, storage 23%, bandwidth 14%, support 7%." data={spend} valueFormat={money} centerLabel="This month" />,
  Thin: () => <DonutChart title="Cloud spend" summary="Cloud spend by category." thickness="thin" data={spend} valueFormat={money} size={170} />,
}

Source: packages/ui/src/donut-chart/donut-chart.tsx

Catalog