Pie and Donut

Polar share series. angleField sets the sector value, labelField the name (legend, callout labels, tooltip).

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Browser share' },
    series: [
      {
        type: 'pie',
        angleField: 'share',
        angleName: 'Share, %',
        labelField: 'browser',
        sectorLabel: { enabled: true },
      },
    ],
  };
}

data.ts

export function getData() {
  return [
    { browser: 'Chrome', share: 64 },
    { browser: 'Safari', share: 19 },
    { browser: 'Edge', share: 6 },
    { browser: 'Firefox', share: 5 },
    { browser: 'Other', share: 6 },
  ];
}

Spacing and corner rounding for pie

The same sectorSpacing and cornerRadius also work without a ring:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Pie with spacing and rounded corners' },
    series: [
      {
        type: 'pie',
        angleField: 'share',
        angleName: 'Share, %',
        labelField: 'device',
        sectorSpacing: 3,
        cornerRadius: 7,
        sectorLabel: { enabled: true },
      },
    ],
  };
}

data.ts

export function getData() {
  return [
    { device: 'Smartphones', share: 48 },
    { device: 'Laptops', share: 24 },
    { device: 'Tablets', share: 14 },
    { device: 'Desktops', share: 9 },
    { device: 'Other', share: 5 },
  ];
}

Donut

innerRadiusRatio creates a ring; innerLabels adds text in the center.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Order statuses' },
    series: [
      {
        type: 'donut',
        angleField: 'count',
        angleName: 'Orders',
        labelField: 'status',
        innerRadiusRatio: 0.62,
        // callout lines: length and style of each segment are configured separately
        calloutLine: {
          radial: { length: 10, strokeWidth: 1 },
          horizontal: { length: 14, strokeWidth: 1 },
        },
        innerLabels: [
          { text: '2193', fontSize: 22, fontWeight: 'bold' },
          { text: 'orders', fontSize: 12 },
        ],
      },
    ],
    legend: { position: 'right' },
  };
}

data.ts

export function getData() {
  return [
    { status: 'Completed', count: 1840 },
    { status: 'Cancelled', count: 215 },
    { status: 'Refunded', count: 96 },
    { status: 'Failed', count: 42 },
  ];
}

Rotation, colors, sector labels

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Rotation and sector labels' },
    subtitle: { text: 'rotation: -90, sectorLabel + custom colors' },
    series: [
      {
        type: 'pie',
        angleField: 'amount',
        angleName: 'Share, %',
        labelField: 'source',
        rotation: -90,
        fills: ['#1d4fd7', '#27c08d', '#f4a236', '#9a7bff'],
        sectorLabel: { enabled: true },
        calloutLabel: { enabled: false },
      },
    ],
    legend: { position: 'right' },
  };
}

data.ts

export function getData() {
  return [
    { source: 'Organization', amount: 46 },
    { source: 'Grants', amount: 28 },
    { source: 'Partners', amount: 16 },
    { source: 'Other', amount: 10 },
  ];
}

Custom tooltip

The series tooltip.renderer receives the whole datum, so the tooltip can display any fields:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Custom sector tooltip' },
    series: [
      {
        type: 'donut',
        angleField: 'visits',
        labelField: 'channel',
        innerRadiusRatio: 0.55,
        tooltip: {
          renderer: ({ datum, color }) => ({
            heading: String(datum.channel),
            rows: [
              { label: 'Visits', value: String(datum.visits), color },
              { label: 'Conversion', value: `${datum.conversion}%` },
            ],
          }),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { channel: 'Organic', visits: 18200, conversion: 4.1 },
    { channel: 'Ads', visits: 9400, conversion: 2.6 },
    { channel: 'Social', visits: 6100, conversion: 1.9 },
    { channel: 'Email', visits: 2800, conversion: 6.4 },
  ];
}

Spacing and corner rounding

sectorSpacing is the gap between sectors (px), cornerRadius rounds the corners:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

const money = new Intl.NumberFormat('en-US');

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sector spacing and corner radius' },
    series: [
      {
        type: 'donut',
        angleField: 'amount',
        labelField: 'fund',
        innerRadiusRatio: 0.55,
        sectorSpacing: 6,
        cornerRadius: 8,
        calloutLabel: { enabled: true },
        calloutLine: {
          radial: { length: 12, strokeWidth: 1 },
          horizontal: { length: 16, stroke: '#9aa1ad', strokeWidth: 1 },
        },
        tooltip: {
          renderer: ({ label, value, color }) => ({
            heading: label,
            rows: [{ label: 'Amount', value: money.format(Number(value)), color }],
          }),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { fund: 'Stocks', amount: 32129675 },
    { fund: 'Bonds', amount: 9196461 },
    { fund: 'Funds', amount: 5248310 },
    { fund: 'Deposits', amount: 3933726 },
    { fund: 'Currency', amount: 3354246 },
  ];
}

Values in the legend

legendValue shows the sector value to the right of the label; the tooltip here is anchored to the cursor (tooltip.position.anchorTo: 'pointer'):

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Values in the legend' },
    series: [
      {
        type: 'donut',
        angleField: 'amount',
        labelField: 'source',
        innerRadiusRatio: 0.62,
        sectorSpacing: 3,
        cornerRadius: 4,
        calloutLabel: { enabled: false },
        innerLabels: [
          { text: 'Total', fontSize: 13 },
          { text: '$86K', fontSize: 24, fontWeight: 'bold' },
        ],
        legendValue: {
          enabled: true,
          formatter: ({ value }) => `$${value}K`,
        },
      },
    ],
    legend: { position: 'right' },
    tooltip: { position: { anchorTo: 'pointer', yOffset: -8 } },
  };
}

data.ts

export function getData() {
  return [
    { source: 'Equipment sales', amount: 35 },
    { source: 'Online training', amount: 12 },
    { source: 'Athlete contracts', amount: 5 },
    { source: 'Merchandise', amount: 21 },
    { source: 'Sponsored events', amount: 13 },
  ];
}

Donut progress

A thin ring + innerLabels makes a compact indicator:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Year progress' },
    series: [
      {
        type: 'donut',
        angleField: 'value',
        labelField: 'state',
        innerRadiusRatio: 0.78,
        rotation: 0,
        fills: ['#21a06c', '#e8eaee'],
        calloutLabel: { enabled: false },
        innerLabels: [
          { text: '68%', fontSize: 26, fontWeight: 'bold' },
          { text: 'of plan complete', fontSize: 12 },
        ],
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { state: 'Done', value: 68 },
    { state: 'Remaining', value: 32 },
  ];
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Type	Default	Description
angleField	string	—	sector value (required)
labelField	string	—	sector name
fills	ColorValue[]	theme palette	sector colors around the circle
strokes	ColorValue[]	theme palette	sector colors around the circle
rotation	Degrees	0	start angle
outerRadiusRatio	Fraction	0.85	fraction of the available radius used by the chart (labels go in the remaining space)
innerRadiusRatio (donut)	Fraction	0.6	inner radius
angleName	string	angleField name	value label in the tooltip
sectorSpacing	Pixels	0	constant-width gap between sectors
cornerRadius	Pixels	0	sector corner rounding
calloutLabel.enabled	boolean	on with labelField	callout labels
calloutLabel.fontSize	Pixels	11	callout label font
calloutLabel.fontFamily	string	theme font	font family
calloutLabel.color	ColorValue	foreground	text color
calloutLine.radial.length	Pixels	20	radial segment length
calloutLine.radial.stroke	ColorValue	sector color	radial segment color
calloutLine.radial.strokeWidth	Pixels	1	width
calloutLine.horizontal.length	Pixels	20	length of the tail toward the label
calloutLine.horizontal.stroke	ColorValue	same as radial	tail color
calloutLine.horizontal.strokeWidth	Pixels	same as radial	tail width
sectorLabel.enabled	boolean	false	share in % inside the sector
sectorLabel.positionRatio	Fraction	0.7	position along the radius
sectorLabel.fontSize	Pixels	11	font
sectorLabel.color	ColorValue	auto contrast	color (halo in the sector color)
legendValue.enabled	boolean	false	sector value in the legend
legendValue.formatter	({ datum, label, value, color }) => string	value	value format
tooltip.renderer	({ datum, label, value, color }) => …	—	custom tooltip
innerLabels[]	{ text, fontSize?, fontWeight?, color? }	—	lines in the donut center
innerCircle.fill	ColorValue	—	donut center fill
innerRadiusRatio	Fraction	0.6	donut inner radius

Clicking a legend item hides the sector (shares are recalculated); legend items that do not fit are paginated with arrows.