- Add the Progress Ring element to your mobile page. - Set the rings data using the Rings JSON field.
- Each ring should include a label, value, max value or percentage, and color.
- Use one ring for simple progress such as completion percentage.
- Use multiple rings when comparing related progress values such as swim, bike, and run.
- Customize ring size, thickness, spacing, and padding to match your layout.
- Use the center title when you want a label inside the rings.
- Leave the center title blank if you do not want center title text.
- Use the center value when you want the main progress value displayed in the middle.
- Leave the center value blank if you do not want center value text.
- Enable the legend when users need labels beside or below the rings.
- Choose the legend position based on the available screen space.
- Use ring selection states when workflows need to know which ring the user tapped.
- Use the selected ring label, value, color, and percentage states to update other UI elements.
- Enable animation when the chart should draw in smoothly.
- Adjust the animation duration if you want faster or slower progress movement.
- Use clear color contrast between each progress ring and the track color.
- Keep ring labels short so the legend remains easy to read on mobile screens.
- Test the chart on real mobile devices because available space can vary by screen size.