Pie & donut

A pie chart is one 100% stacked bar bent around a circle: geom.bar({ position: 'fill' }) under coord.polar({ theta: 'y' }). Each slice’s angle is proportional to its value. Add an innerRadius and it becomes a donut, a pie with the center cut out. Both work best for a few parts of a whole.

Pie

Map the slice category to color, the value to y, and leave x empty so all slices share one band:

import { useMemo } from 'react';
import {
  GraphProvider,
  GraphRenderer,
  createSpec,
  pipe,
  geom,
  scale,
  coord,
} from '@graphysdk/react';

const data = {
  columns: [
    { key: 'department', label: 'Department' },
    { key: 'spend', label: 'Spend' },
  ],
  rows: [
    { department: 'Engineering', spend: 420 },
    { department: 'Marketing', spend: 180 },
    { department: 'Sales', spend: 150 },
    { department: 'Operations', spend: 95 },
    { department: 'HR', spend: 80 },
    { department: 'Legal', spend: 75 },
  ],
};

export function BudgetBreakdown() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: '', y: 'spend', color: 'department' }),
        geom.bar({ position: 'fill' }),
        coord.polar({ theta: 'y' }),
        scale.x(),
        scale.y(),
        scale.color.discrete()
      ),
    []
  );

  return (
    <GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Donut

A donut is the same recipe with an innerRadius on the polar coord. The hole leaves room for a headline number, and a thin band can read more cleanly than a full pie:

const data = {
  columns: [
    { key: 'browser', label: 'Browser' },
    { key: 'share', label: 'Share' },
  ],
  rows: [
    { browser: 'Chrome', share: 65 },
    { browser: 'Safari', share: 18 },
    { browser: 'Firefox', share: 7 },
    { browser: 'Edge', share: 5 },
    { browser: 'Other', share: 5 },
  ],
};

const spec = pipe(
  createSpec({ x: '', y: 'share', color: 'browser' }),
  geom.bar({ position: 'fill' }),
  coord.polar({ theta: 'y', innerRadius: 0.55 }),
  scale.x(),
  scale.y(),
  scale.color.discrete()
);

innerRadius is a fraction of the outer radius; 0.55 cuts the hole just past halfway. Larger values give a thinner band. The hole is the natural home for a headline number:

config({ headline: { show: 'total', position: 'center' } });

position: 'center' needs a non-zero innerRadius; a full pie has no hole to sit in.

Where the first slice starts

coord.polar takes a startAngle in degrees, 0 by default. It rotates the whole pie, which is how you put the largest slice at a chosen clock position:

coord.polar({ theta: 'y', innerRadius: 0.55, startAngle: 90 });

Slice labels

Turn on data labels to print each slice’s value or share. On polar bars, showCategoryLabels prefixes the category:

geom.bar({
  position: 'fill',
  dataLabels: {
    showDataLabels: true,
    format: 'percentage', // the resolved default under polar; 'absolute' for raw values
    showCategoryLabels: true, // "Engineering · 42%"
  },
});

Separated wedges

A border in the chart’s background color leaves a crisp gap between wedges. Borders are paint, so they come from the stylesheet:

import {
  createSpec,
  pipe,
  geom,
  scale,
  coord,
  styles,
  style,
} from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: '', y: 'spend', color: 'department' }),
  geom.bar({ position: 'fill' }),
  coord.polar({ theta: 'y' }),
  scale.x(),
  scale.y(),
  scale.color.discrete(),
  styles({
    defaults: [style.geom.bar({ stroke: '#ffffff', strokeWidth: 2 })],
  })
);

The border is the only way to do this. Every slice is a segment of one stacked bar, so the segments meet edge to edge and there is no band gap to widen.

Rounded wedges

Wedges take the bar geom’s cornerRadius, a named token the polar renderer sizes against each wedge’s radial span. The default is 'sm', so wedge corners are already slightly rounded:

styles({ defaults: [style.geom.bar({ cornerRadius: 'none' })] }); // crisp, square wedges
styles({ defaults: [style.geom.bar({ cornerRadius: 'lg' })] }); // pronounced petals

Styling — the stylesheet, its cascade and every target
Headline numbers — a metric in the donut’s hole
Radar & radial — the theta: 'x' polar charts
Coordinate systems — the polar plane, theta, startAngle and innerRadius

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Pie

Donut

Where the first slice starts

Slice labels

Separated wedges

Rounded wedges

​Pie

​Donut

​Where the first slice starts

​Slice labels

​Separated wedges

​Rounded wedges

​Related

Pie

Donut

Where the first slice starts

Slice labels

Separated wedges

Rounded wedges

Related