Charts B
Radial
Parts of a total in concentric rings.
Example
Radial chart
Concentric rings with the name written along each arc. Hover a ring and the others step back while the title and tile follow.
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="radial" data-u-props="{"label":"Channels","periods":[{"label":"Last 7 days","delta":3.2,"items":[{"name":"Search","value":640},{"name":"Direct","value":480},{"name":"Social","value":410},{"name":"Email","value":290},{"name":"Other","value":160}]},{"label":"Last 30 days","delta":5.6,"items":[{"name":"Search","value":2310},{"name":"Direct","value":1720},{"name":"Social","value":1480},{"name":"Email","value":1040},{"name":"Other","value":590}]},{"label":"Last week","delta":-1.4,"items":[{"name":"Search","value":590},{"name":"Direct","value":455},{"name":"Social","value":430},{"name":"Email","value":262},{"name":"Other","value":143}]}]}"></div>
<div class="u-chartb-copy">
<h3>Radial chart</h3>
<p>Concentric rings with the name written along each arc. Hover a ring and the others step back while the title and tile follow.</p>
</div>
</article>Installation
Just this chart, with the core and the tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add radialDependency 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-radialFamily 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}]}, with the same items in every period. |
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 ring". |
| 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.