Lists: Circle progress bar as column view

Question

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?

Answer 1

Yes, it is possible using JSON column formatting capabilities.

Check this sample available in GitHub list formatting samples repository:

Doughnut Chart

---

---

Additional formatting samples:

1. Number Battery

   

2. Number Gauge