PieChart
PieChart visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly.Key features:
- Proportional visualization: Displays data segments as slices of a complete circle
- Flexible labeling: Configurable label positions both inside and outside chart segments
- Data binding: Connects to array data with specified keys for values and labels
- Label list display: Optional legend-style list showing all segments and values
- Customizable sizing: Configurable dimensions and outer radius for different layouts
For a variation with a hollow center, see DonutChart.
Properties
data
The data to be displayed in the chart. Needs to be an array of objects.
dataKey
This property specifies the key in the data objects that will be used to render the chart.
labelListPosition (default: "inside")
The position of the label list.
Available values:
top, left, right, bottom, inside (default), outside, insideLeft, insideRight, insideTop, insideBottom, insideTopLeft, insideBottomLeft, insideTopRight, insideBottomRight, insideStart, insideEnd, end, center, centerTop, centerBottom, middlenameKey
Specifies the key in the data objects that will be used to label the different data series.
outerRadius
The outer radius of the pie chart, can be a number or a string (e.g., '100%').
showLabel (default: true)
Toggles whether to show labels (
true) or not (false).showLabelList (default: false)
Whether to show labels in a list (
true) or not (false).showLegend (default: false)
Toggles whether to show legend (
true) or not (false).Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| textColor-labelList-PieChart | $textColor-primary | $textColor-primary |