Pie charts provide a quick, intuitive view of proportions, making it easy to compare the relative sizes of categories at a glance.
| Name | Description | Type | Required | Default |
loading | Displays a loading skeleton | boolean | No | false |
donut | Gives the chart a hollow centre | boolean | number | No | false |
className | Applies a custom class | string | No | - |
labels | Displays axis labels | boolean | No | true |
glow | Adds a glow effect around the chart | boolean | No | true |
total | Sets a maximum value for a progress donut chart | number | No | - |
children | Custom content rendered within the donut centre | ReactNode | No | - |
Note
The total and children props are designed for use with donut charts.
Custom styling can be applied by targeting the class names below. Each class corresponds to a specific element for precise theming and overrides.
| Class Name | Element |
pie__segment-group | Wraps each pie segment and its corresponding label |
pie__segment | Each slice of the pie |
pie__label | The label of each segment |
pie__label__connector | The line connecting each segment to its label |
pie__track | Background track under the progress ring on a progress chart |
pie__children | The element that can be rendered in the center of a donut chart (using the children prop), |