PieChart

The PieChart component displays part-to-whole relationships using circular slices. Each slice represents a category, and its angle is proportional to the numeric value it contributes to the total.

This chart is well-suited for visualizing distribution, market share, or proportions across categories.


Usage Example

1<PieChart
2  marks={[
3    { category: "Cachapa", value: 9631 },
4    { category: "Crêpe", value: 6959 },
5    { category: "Injera", value: 4891 },
6    ...
7  ]}
8/>

Props

marks: Array<object> (required)

Defines the segments (slices) of the pie chart.

Each mark must include:

  • category: string A label for the slice. It identifies the category the value belongs to.

  • value: number The numeric value used to determine the slice’s angle. All values are summed and each slice’s angle is proportional to its fraction of the total.

  • Inherits additional properties from ChartMarkProps for styling:

    • foregroundStyle – set color per category
    • annotation – attach labels or icons
    • opacity, cornerRadius, zIndex, etc.

Full Example

1const data = [
2  { name: "Cachapa", sales: 9631 },
3  { name: "Crêpe", sales: 6959 },
4  { name: "Injera", sales: 4891 },
5  { name: "Jian Bing", sales: 2506 },
6  { name: "American", sales: 1777 },
7  { name: "Dosa", sales: 625 },
8]
9
10<PieChart
11  marks={data.map(item => ({
12    category: item.name,
13    value: item.sales
14  }))}
15/>

Use Cases

PieChart is suitable for:

  • Displaying proportions across a fixed set of categories
  • Visualizing market share, vote distribution, or sales ratios
  • Representing totals broken down by labeled segments