Vitreo
Charts

Pie and donut

Parts of a whole

Donut

With the total in the middle

Code
<div class="chart" role="img" aria-label="Donut" style="--chart-h: 300px" data-chart='{"type":"donut","legend":true,"format":"number","centerLabel":"Visitors","series":[{"data":[{"name":"Desktop","value":26810},{"name":"Mobile","value":18402},{"name":"Tablet","value":3004}]}]}'></div>

Pie

With labels

Code
<div class="chart" role="img" aria-label="Pie" style="--chart-h: 300px" data-chart='{"type":"pie","format":"number","series":[{"data":[{"name":"Search","value":412},{"name":"Social","value":286},{"name":"Email","value":198},{"name":"Referral","value":104}]}]}'></div>

Thin ring

Code
<div class="chart" role="img" aria-label="Thin ring" style="--chart-h: 300px" data-chart='{"type":"donut","inner":"76%","outer":"88%","legend":true,"format":"money","centerLabel":"Spent","series":[{"data":[{"name":"Payroll","value":1236000},{"name":"Cloud","value":312000},{"name":"Marketing","value":248000}]}]}'></div>

Rose

Slices sized by value

Code
<div class="chart" role="img" aria-label="Rose" style="--chart-h: 300px" data-chart='{"type":"custom","format":"number","option":{"series":[{"type":"pie","roseType":"area","radius":["14%","82%"],"itemStyle":{"borderRadius":6},"label":{"show":false},"data":[{"name":"Mon","value":42},{"name":"Tue","value":51},{"name":"Wed","value":38},{"name":"Thu","value":64},{"name":"Fri","value":59},{"name":"Sat","value":22},{"name":"Sun","value":18}]}]}}'></div>