Donut

Donut charts are pie charts with a hollow center, ideal for displaying a central metric alongside part-to-whole relationships.

When to use

Part-to-whole with central metric - Show breakdown with total or key value in center
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: 'donut',
  data: {
    columns: [
      { key: 'category', label: 'Category' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { category: 'Electronics', sales: 45000 },
      { category: 'Clothing', sales: 32000 },
      { category: 'Home & Garden', sales: 28000 },
      { category: 'Sports', sales: 18000 },
      { category: 'Books', sales: 12000 },
    ],
  },
};

Data labels

Show category labels and percentages on slices:

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

Pie - Standard pie chart
Type options - Donut 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