Pie & donut

A pie chart is a single stacked-fill 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 centre cut out. Both work best for a small number of 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.palette()
      ),
    []
  );

  return (
    <GraphProvider input={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 the thinner ring 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.palette()
);

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

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

position: 'center' needs a non-zero innerRadius — on a full pie there is no hole to sit in.

Where the first slice starts

coord.polar takes a startAngle in degrees, defaulting to 0. It rotates the whole ring, which is how you put a dominant slice at a particular 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.palette(),
  styles({
    defaults: [style.geom.bar({ borderColor: '#ffffff', borderWidth: 2 })],
  })
);

The border is the lever for this, not the scale: every slice is a segment of one stacked bar, so the segments meet edge to edge and there is no band gap between them to widen.

Rounded wedges

Wedges carry the bar geom’s borderRadius, a named token the polar renderer resolves against each wedge’s radial span. The built-in default is 'sm', so wedge corners are already slightly softened:

styles({ defaults: [style.geom.bar({ borderRadius: 'none' })] }); // crisp, square wedges
styles({ defaults: [style.geom.bar({ borderRadius: '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

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