Pie / Donut Chart

A circular chart for showing proportional data. The donut variant includes a centre label for the total or selected value.

Preview

Pie chart

Direct (30%) Organic (20%) Referral (15%) Social (10%) Other (5%)

Donut with centre label

8,420

Total visits

Direct (40%) Search (25%) Referral (15%) Social (10%)

Props

Prop	Type	Default	Description
data	{ label: string; value: number; color?: string }[]	--	Segment data
donut	boolean	false	Render as donut (thinner ring)
centerLabel	string	--	Donut centre label
centerValue	string | number	--	Donut centre value
showLegend	boolean	true	Show legend beside chart
size	number	200	Chart diameter in px

Code example

React

import { PieChart } from '@thepace/lexicon/components';

<PieChart
  donut
  centerValue="8,420"
  centerLabel="Total visits"
  data={[
    { label: 'Direct', value: 3368 },
    { label: 'Search', value: 2105 },
    { label: 'Referral', value: 1263 },
    { label: 'Social', value: 842 },
  ]}
/>

CSS class reference

Class	Purpose
.lex-pie-chart	Flex container (chart + legend)
.lex-pie-chart__svg	SVG circle canvas
.lex-pie-chart__segment	Individual arc segment
.lex-pie-chart__wrapper	Relative wrapper for centre label
.lex-pie-chart__center	Centre label container
.lex-pie-chart__center-value	Large centre number
.lex-pie-chart__center-label	Muted centre descriptor

Accessibility

• Use role="img" with aria-label on the SVG listing all segment names and percentages.
• Provide a data table alternative for screen readers.
• Segment hover shows tooltip with exact value.
• White gaps between segments (via stroke technique) ensure segments are visually distinct.

Guidelines

Do

• Limit to 4–5 segments — group small values as "Other".
• Use the donut variant to display a summary metric in the centre.
• Always include a legend with percentages.

Don't

• Don't use more than 6 segments — the chart becomes unreadable.
• Don't use 3D pie effects or exploded segments.
• Don't use a pie chart when exact comparison matters — use a Bar Chart instead.