Logo

DonutChart

A derivative of PieChart with a hollow center. Note that the height of the component or its parent needs to be set explicitly.

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.

innerRadius (default: 60)

Sets the inner radius of the donut chart.

nameKey

Specifies the key in the data objects that will be used to label the different data series.

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)

Whether to show a 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

VariableDefault Value (Light)Default Value (Dark)
textColor-labelList-PieChart$textColor-primary$textColor-primary
This site is an XMLUI™ app.