Pie / Donut Chart

Part-to-whole for two to five categories; prefer bars for comparisons.

Import

import { PieChart } from '@marbleui/ui'

Props

<PieChart>

Prop	Type	Default
data *required	`PieDatum[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
description	`ReactNode`	`—`
size	`number`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`—`

Usage notes

Part-to-whole for two to five categories, with a legend of each slice’s share. Use BarChart when readers need to compare values, and DonutChart to show a total in the middle.

<PieChart
  title="Sessions by browser"
  summary="Chrome 61%, Safari 24%, Firefox 7%, Edge 6%, other 2%."
  data={[{ label: 'Chrome', value: 6120 }, { label: 'Safari', value: 2380 }, { label: 'Firefox', value: 740 }, { label: 'Edge', value: 560 }, { label: 'Other', value: 200 }]}
/>

Slices are drawn in the order given, not sorted for you: sort large to small and put “Other” last. Colors follow that order (--chart-1…8) unless a datum sets color.
The legend shows rounded percentages, which may not add up to 100. Values appear in the hover tooltip and the “Show data” table, formatted by valueFormat.
Tooltips are pointer-only and the legend sits inside the chart image, so write the shares into summary. See ChartContainer for the table.
size (default 200) is a fixed pixel diameter; the chart doesn’t scale with its container.

Example source · show

import { PieChart } from './pie-chart'

const browsers = [
  { label: 'Chrome', value: 6120 },
  { label: 'Safari', value: 2380 },
  { label: 'Firefox', value: 740 },
  { label: 'Edge', value: 560 },
  { label: 'Other', value: 200 },
]

export const styles = {
  Default: () => <PieChart title="Sessions by browser" summary="Chrome 61%, Safari 24%, Firefox 7%, Edge 6%, other 2%." data={browsers} />,
  Small: () => <PieChart title="Plan mix" summary="Pro 58%, Team 27%, Starter 15%." size={140} data={[{ label: 'Pro', value: 58 }, { label: 'Team', value: 27 }, { label: 'Starter', value: 15 }]} />,
}

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

Catalog