Pie

Pie charts display data as slices of a circle, showing parts of a whole as proportions.

When to use

Simple part-to-whole relationships - Show how categories contribute to a total
2-6 categories - Works best with a small number of slices
Percentage comparison - Emphasise relative proportions
Single data series - Show one breakdown at a time

Basic example

const config: GraphConfig = {
  type: 'pie',
  data: {
    columns: [
      { key: 'browser', label: 'Browser' },
      { key: 'users', label: 'Users' },
    ],
    rows: [
      { browser: 'Chrome', users: 12500 },
      { browser: 'Safari', users: 8200 },
      { browser: 'Firefox', users: 3400 },
      { browser: 'Edge', users: 2100 },
      { browser: 'Other', users: 1800 },
    ],
  },
};

Data labels

Show category labels and percentages on slices:

const config: GraphConfig = {
  type: 'pie',
  dataLabels: {
    showCategoryLabels: true,
    showDataLabels: true,
    dataLabelFormat: 'percentage',
  },
  data: {
    /* ... */
  },
};

Donut - Donut chart with hollow center
Type options - Pie chart options
Data labels - Display values and percentages

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

When to use

Basic example

Data labels

​When to use

​Basic example

​Data labels

​Related

When to use

Basic example

Data labels

Related