Charts B
Gauge
Parts of a total in a half circle of segments.
Example
Gauge
Half circle of stacked, rounded segments with the largest share in the center. Hover a segment to swap the center.
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="gauge" data-u-props="{"label":"Traffic by device","periods":[{"label":"Last 7 days","delta":3.4,"items":[{"name":"Desktop","value":1560},{"name":"Mobile","value":900},{"name":"Tablet","value":330},{"name":"TV","value":210}]},{"label":"Last week","delta":-0.6,"items":[{"name":"Desktop","value":1420},{"name":"Mobile","value":960},{"name":"Tablet","value":360},{"name":"TV","value":260}]},{"label":"Last 30 days","delta":7.9,"items":[{"name":"Desktop","value":6400},{"name":"Mobile","value":4300},{"name":"Tablet","value":1500},{"name":"TV","value":800}]}]}"></div>
<div class="u-chartb-copy">
<h3>Gauge</h3>
<p>Half circle of stacked, rounded segments with the largest share in the center. Hover a segment to swap the center.</p>
</div>
</article>Installation
Just this chart, with the core and the tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add gaugeDependency Pulls in b-shell (shell for B charts). The installer downloads it and puts it in the right order.
The full card from the example, as HTML ready to paste:
curl -fsSL unslop.leallabs.dev/i | sh -s add chart-gaugeFamily B: shell u-chartb-card > the data-u with the u-chartb-panel class, then div.u-chartb-copy with h3 and p.
Props
They go in data-u-props, as JSON. Each item in periods becomes an option in the picker and the chart animates from the old data to the new.
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | no default | Small label at the top of the card. |
periods | array | no default | List of {label, delta, items: [{name, value}]}, as in radial. |
period | number | 0 | Index of the period that opens selected. |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
| chart svg | role="img" and aria-label | "Label by segment". |
| period list | role="listbox", role="option" | Opens with aria-expanded and marks the option in aria-selected. |
Keyboard
| Key | Does |
|---|---|
| Enter or Space | opens the period list |
| Up and down arrows | moves through the options |
| Esc | closes without changing |
| Tab | closes and moves focus on |
Events and API
No public events. The period change happens inside the card.