RingProgress
RingProgress displays a circular ring, divided in several parts:
- We can use it as a circular progress bar, with a single bar showing the progress over the background track.
- We may also use it as a segmented, Donut Chart, where one section represents a quantity with its own bar.
Example of a circular progress bar:
<RingProgress
sections={[{ value: 35, color: progressColor, tooltip: "35%" }]}
rootColor={trackColor}
size={30}
thickness={4}
roundCaps
/>
Example of a donut chart with multiple sections:
sections={[
{ value: 40, color: 'cyan' },
{ value: 15, color: 'orange' },
{ value: 15, color: 'grape' },
]}