Give user feedback for status of the task with circle diagram
The sections prop accepts an array of objects with the following properties:
Note: Section values should sum to 100% or less for expected behavior. Values exceeding 100% total will cause sections to overlap.
Application data usage
Use the size , thickness & roundCaps props to configure the RingProgress size and thickness values:
Add a tooltip property to a section to display a floating Tooltip when the user hovers over it:
Hover sections to see tooltips
Use the sectionGap prop to add visual separation between sections. The gap is specified in degrees:
Use the startAngle prop to control where the progress starts. The angle is specified in degrees, where 0 = right, 90 = bottom, 180 = left, and 270 = top (default):
Use the rootColor prop to customize the color of the unfilled portion of the ring (the background):
Each section can receive any valid SVG <circle> element props, including event handlers like onClick , onMouseEnter , and onMouseLeave :
Hovered section: none
You can add any React node as a label, for example a Text component with custom styling or an ActionIcon :
By default, transitions are disabled. To enable them, set the transitionDuration prop to a number of milliseconds: