Pie Chart

A pie chart is a circular statistical chart divided into several sectors. In a pie chart, the arc length (as well as the central angle and area) of each sector represents the proportion of that category to the whole, and these sectors together form a complete circle. The most prominent function of a pie chart is to show proportions. Conventionally, people also use pie charts to compare the sizes of sectors to gain an understanding of the data. However, since humans are less perceptive of angles than lengths, pie charts are often inadequate when exact values need to be expressed (especially when values are close or numerous); bar charts are recommended instead. In terms of data, a pie chart generally requires one categorical data field and one continuous data field. It is worth noting that the data in the categorical field should, in the context of the chart, constitute a whole (e.g., Product A, Product B, and Product C make up the entire product line), rather than being independent and unrelated.

Use Cases

  • Used to show the proportion of components, such as market share, budget allocation, etc.
  • To highlight the proportion of a specific part within the whole

Visual Examples

2024 Global Mobile OS Market Share

Enterprise IT Budget Allocation (Donut Chart, Custom Colors)

Global Energy Consumption Structure, Custom Palette

Options

Configuration Options

PropertyTypeRequiredDescription
typestringrequiredValue must be "pie".
dataObject[]requiredChart data.
data.categorystringrequiredCategory name.
data.valuenumberrequiredData value. Percentage values cannot be used.
innerRadiusnumberoptionalSet to 0.6 to enable donut chart mode.
titlestringoptionalChart title.
theme'default' | 'dark' | 'academy'optionalChart theme, default is "default".
styleObjectoptionalChart style.
style.backgroundColorstringoptionalMust be a valid color value.
style.palettestring[]optionalMust be an array of valid color values.