DonutChart
The DonutChart is a variation of a pie chart with a circular shape and a hole
in the center. It divides the total amount into proportional slices, each
representing a category or value. The key difference is the presence of the
central hole, which allows placing additional information in the available
space.
DonutChartProps
, , | Name | Type | Default | Description |
|---|---|---|---|
data | - | Categorical data of the chart. | |
width? | - | Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container. | |
height? | | | 300px. | The height of the chart. If a number is passed, it will be treated as px. |
colorPalette? | | | 'categorical'. | Set of Color palette to be used in charts. |
formatter? | | <, > | - | Custom Formatter for the chart |
truncationMode? | 'middle' | Truncation mode to use (start, middle, end) Applied to all the parts that truncate text. | |
seriesActions? | (slice: ) => | - | Exposed callback to display series actions for a slice |
loading? | false | Show the loading indicator when truly. |
LabelsConfig
| Name | Type | Default | Description |
|---|---|---|---|
hidden? | false (all the labels are displayed). | Hides the slice labels. | |
valueType? | 'relative' | Display the label with a relative or absolute value. |
ThresholdConfig
| Name | Type | Default | Description |
|---|---|---|---|
type | 'relative'. | Type of the grouping threshold. Can be "relative", "absolute" or "number-of-slices". | |
value | - | Value of the group threshold. Default is dynamically calculated depending on the chart size for relative and absolute. 10 in case of number-of-slices. |
GroupConfig
| Name | Type | Default | Description |
|---|---|---|---|
name? | 'Other'. | Name of the group. | |
threshold | - | The threshold for the group. |