Progress Circle
You'll need to either build a template the svg structure (if static site or cms) or use the Vue component (form vue library) for this. If building a template it's pretty simple (see shortcode in 'frontend/docs-src/src/templates/shortcodes/progressCircle.js')
Basic Example
The default appearance of the donut chart.
Small
Testing user defined size modifier
Outside
A version of the chart where the value is displayed to the right of the chart.
Outside Below
A version of the chart where the value is displayed to the below of the chart.
Neutral Color
The chart can be displayed in a neutral color scheme.
Pie Style
The donut can also be rendered as a solid pie chart.
Pie Style (outside, small)
The donut can also be rendered as a solid pie chart.
Pie Style (outside, small, no mask)
The donut can also be rendered as a solid pie chart.
Status Colors
The chart color will change based on the percentage value to indicate status (low, incomplete, complete).