Charts C
Scatter
Points by category, with the legend isolating one and a tip per point.
Example
Scatter
Tickets by time to resolution, colored by category. Hover a legend category to isolate it, or a point to see the details.
<article class="u-chartc-card">
<div class="u-chartc-panel">
<div data-u="scatter" data-u-props='{
"label": "Tickets resolved",
"unit": "h",
"categories": [{"label": "Billing"}, {"label": "Access"}, {"label": "Bug"}],
"periods": [
{
"label": "This week",
"delta": 6.8,
"data": [
[
[10, 4.2],
[9.8, 4.2],
[5.7, 3.8],
[6.3, 4.4],
[7.2, 3.6],
[11.5, 4.3],
[8.7, 4.3],
[5.9, 4.3],
[2.7, 4.9],
[10.3, 4.4],
[13, 4.8],
[2.2, 4.3],
[3.2, 4.4],
[3.3, 4.4],
[5.7, 4.7],
[3.5, 4.4]
],
[
[2.5, 4.5],
[2.4, 5],
[2.3, 4.3],
[6.5, 4.6],
[4.6, 4.8],
[3, 4.5],
[2.9, 4.3],
[3.9, 4.4],
[2.1, 4.4],
[3.4, 4.9],
[3.2, 4.6],
[1.4, 4.8]
],
[
[19.5, 3.2],
[10.5, 3.5],
[17.2, 3.1],
[21.7, 3.1],
[19, 2.6],
[20.3, 2.6],
[18.5, 2.8],
[14.1, 2.4],
[18.7, 2.7],
[41.2, 3]
]
]
},
{
"label": "This month",
"delta": 4.1,
"data": [
[
[4, 4.5],
[14.3, 4.3],
[9.1, 4.5],
[3.3, 3.7],
[4.2, 4.9],
[8.8, 3.9],
[4.7, 4.6],
[4.1, 4.6],
[6.3, 4.3],
[5, 4.2],
[8.2, 5],
[3.6, 3.3],
[8.5, 4.3],
[4.2, 4.7],
[3.8, 4.4],
[4.6, 3.4],
[2.6, 4.3],
[1.5, 4.8],
[4.1, 4.5],
[5.8, 4.6],
[8.7, 4.2],
[6, 4.3],
[2.7, 4.2],
[4.9, 4.3],
[12.5, 3.9],
[2.6, 4.3],
[11.4, 4.7],
[5.9, 5],
[20.9, 4.2],
[6.6, 4.7]
],
[
[3.2, 3.5],
[3.8, 4],
[2.6, 4.6],
[3.8, 4.8],
[2.2, 4.3],
[2.4, 4.6],
[3.3, 4.3],
[2.2, 3.7],
[1.5, 4.3],
[1.9, 4.6],
[2.7, 4.4],
[3.1, 4.3],
[3.7, 5],
[4.4, 4.4],
[2.6, 4.2],
[3.9, 3.8],
[6.7, 4.7],
[2.7, 3.9],
[2.6, 5],
[3.6, 4],
[1.5, 4.3],
[3.9, 4.6]
],
[
[8, 2.9],
[16.5, 2.9],
[24.8, 3],
[25.4, 2.7],
[11, 3.1],
[6.6, 3.8],
[15.6, 3.6],
[24.3, 3],
[33.2, 2.7],
[22.5, 3.5],
[25.9, 3.1],
[14.3, 3.4],
[12.3, 3.4],
[11, 3],
[17.8, 3.4],
[14.8, 2.8],
[31, 1.7],
[28.2, 2.7]
]
]
},
{
"label": "Quarter",
"delta": 9.7,
"data": [
[
[5.3, 4.8],
[3.6, 4],
[19.6, 4.9],
[8.4, 4.5],
[2.6, 3.8],
[13.1, 4.1],
[13, 3.7],
[4.9, 3.8],
[6.7, 4.2],
[7.4, 4.7],
[1.4, 4.7],
[8.3, 4],
[3.8, 4],
[7.2, 4.3],
[5.5, 4.3],
[3.5, 4.5],
[7.6, 3.5],
[10.2, 4.3],
[4.7, 3.8],
[4.3, 4.4],
[6.7, 4.4],
[10.7, 4.5],
[1.9, 4.6],
[5.8, 4.8],
[7.3, 4],
[3.5, 3.4],
[6.6, 4.4],
[12.4, 4.3],
[5.2, 4.4],
[5, 4.4],
[6.4, 4.5],
[8.9, 4.2],
[10.4, 4.2],
[4.3, 3.7],
[2, 4.3],
[7.1, 4.5],
[2.9, 4.3],
[7.8, 3.6],
[4.8, 3.9],
[2.7, 4.5],
[14, 4.5],
[11.1, 3.6],
[1.9, 4.5],
[2.5, 4.9],
[8.5, 4.5],
[7.6, 5]
],
[
[3.3, 4.9],
[1.8, 4.4],
[4.3, 4.4],
[2, 4.8],
[4.5, 4.6],
[2.7, 4.4],
[2.5, 4.8],
[1.5, 4.5],
[1.9, 4.4],
[2.6, 5],
[1.8, 5],
[4.8, 4.6],
[3.5, 4.4],
[2.4, 4.4],
[3.3, 5],
[3.3, 4.5],
[8.9, 4.1],
[1.3, 4],
[2.9, 5],
[1.2, 4.7],
[2.8, 4.9],
[2.4, 4.7],
[3.4, 5],
[2.1, 4.1],
[3.9, 4.6],
[4.4, 3.8],
[3.7, 5],
[6.3, 4.3],
[2.6, 4.1],
[3.9, 3.6],
[4, 4.7],
[3.8, 3.7],
[3.9, 4.8],
[4.7, 4.3]
],
[
[14.8, 2.5],
[14.2, 3.1],
[17.7, 2.7],
[27.6, 1.5],
[43.1, 1.5],
[10.2, 3.8],
[9.2, 3.6],
[9.9, 3.4],
[39.4, 1.5],
[46, 2.3],
[16.4, 3],
[19.5, 2.9],
[23.6, 2.6],
[46, 2.5],
[21.3, 3.3],
[8.6, 3.7],
[26.3, 4],
[13.9, 2.8],
[9.6, 3.6],
[11.7, 3.3],
[16, 3.1],
[25.5, 2.9],
[35.1, 2.6],
[14.2, 2.8],
[29.8, 2.1],
[20.2, 3.1],
[18.2, 2.8],
[36.9, 2.2]
]
]
}
]
}'></div>
</div>
<h3 class="u-chartc-title">Scatter</h3>
<p class="u-chartc-desc">Tickets by time to resolution, colored by category. Hover a legend category to isolate it, or a point to see the details.</p>
</article>Installation
Just this chart, with the core and the tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add scatterDependency Pulls in a-chartc (shell for C 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-scatterFamily C: shell u-chartc-card > u-chartc-panel > the data-u, then h3.u-chartc-title and p.u-chartc-desc.
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. |
unit | string | h | X axis suffix. |
xmax | number | 48 | End of the X axis. |
categories | array | no default | List of {label}. |
periods | array | no default | List of {label, delta, data}. data[category] is a list of [x, y], with y from 1 to 5. |
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 category". |
| 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.