Function ApexDonut

This widget shows a Donut chart from an array of value-label elements. Its size and donut form can be customizable.

Example

Here's the most basic example

<ApexDonut data={data} />

Remarks

This donut chart could become fat of thin depending on the percentage you pass through donutSpacePercentage prop.

The bigger this percentage, the thinner the donut will be. Max value: 98, Min value: 0.

Example

Here's an example of a thin Donut widget

<ApexDonut data={data} donutSpacePercentage={90} />

You can also customize other visual properties such as legend, size height and colors throug the corresponding props.

Also, you have access to more advance customization by exposing the underlining library apexcharts through chartOptionsOverrides prop.