Meters
Circle Meter
The circle meter takes a min and max property and displays the value in a circle chart relative to those. If using a fractional value, the label should include the numerator and denominator in separate spans with a / in between the spans.
| Custom Property | Default Value | Description |
|---|---|---|
--size |
100px | The height and width of the meter |
--color |
#36C5BA | The foreground color of the meter |
--background |
#DCDFE4 | The background color of the meter |
--degrees |
0deg | The angle of the meter, calculated as (360/max) * min |
Example
A circle meters using a fraction, percentage and integer values.
HTML
<div class="pv-circle-meter" style="--degrees: 257deg">
<meter min="0" max="7" value="5"></meter>
<label><span>5</span>/<span>7</span></label>
</div>
<div class="pv-circle-meter" style="--degrees: 119deg">
<meter min="0" max="100" value="33"></meter>
<label>33%</label>
</div>
<div class="pv-circle-meter" style="--degrees: 360deg">
<meter min="0" max="100" value="100"></meter>
<label>100</label>
</div>