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