Build in the SharePoint list classes is the option to display percent values as a progress bar.

My idea is to show it as a round progress circle instead (like the image below).

Can this be achieved with the limited CSS support of SharePoint lists? Maybe with the SVG path command?

enter image description here

1 Answer 1


Yes, it is possible using JSON column formatting capabilities.

Check this sample available in GitHub list formatting samples repository:

Doughnut Chart

enter image description here

Additional formatting samples:

  1. Number Battery

    enter image description here

  2. Number Gauge

    enter image description here

  • 1
    Thx, I totally skipped the columns section in the GitHub and focused on the view section.
    – Der_Fab
    Commented Sep 30, 2021 at 13:31
  • @Ganesh - have you come across any way to display an ‘arrow progress bar’? There is detailed question here that recently had a 100 point bounty that expired, but no answer: stackoverflow.com/questions/75406639/… Commented Apr 5, 2023 at 20:40
  • I will have a look and get back to you. Commented Apr 6, 2023 at 7:07
  • Hi @user1063287, I have replied on the question you posted on StackOverflow. Let me know if it works for you. Commented Apr 7, 2023 at 4:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.