Gauge
One value against its range
Score
Code
<div class="chart" role="img" aria-label="Score" style="--chart-h: 260px" data-chart='{"type":"gauge","series":[{"name":"Score","value":78}],"format":"percent","centerLabel":"Customer health"}'></div>With a needle
Code
<div class="chart" role="img" aria-label="With a needle" style="--chart-h: 260px" data-chart='{"type":"custom","option":{"series":[{"type":"gauge","min":0,"max":200,"splitNumber":4,"radius":"92%","axisLine":{"lineStyle":{"width":14,"color":[[0.5,"#10B981"],[0.8,"#F59E0B"],[1,"#F43F5E"]]}},"pointer":{"width":5,"length":"60%"},"anchor":{"show":true,"size":12,"itemStyle":{"color":"#64748B"}},"axisTick":{"show":false},"splitLine":{"length":10,"lineStyle":{"color":"auto"}},"axisLabel":{"distance":22,"fontSize":11},"detail":{"valueAnimation":true,"fontSize":24,"fontWeight":700,"offsetCenter":[0,"70%"],"formatter":"{value} km/h"},"data":[{"value":112}]}]}}'></div>