Skip to main content
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: { /* ... */ }
};