Charts C

Line

Smooth series that draw themselves on entry, with a hover for each moment.

data-u="line"Family C

Example

Line chart

Two smooth series that draw themselves on entry. Hover a point in time and the title, number and tiles show that moment.

<article class="u-chartc-card">
  <div class="u-chartc-panel">
    <div data-u="line" data-u-props='{
      "label": "Response time",
      "unit": "ms",
      "series": [{"label": "p50 (median)"}, {"label": "p95"}],
      "periods": [
        {
          "label": "Last 24 h",
          "delta": -6.4,
          "labels": ["0h", "2h", "4h", "6h", "8h", "10h", "12h", "14h", "16h", "18h", "20h", "22h"],
          "data": [
            [172, 165, 158, 171, 189, 210, 205, 191, 186, 179, 176, 182],
            [410, 395, 388, 430, 492, 548, 521, 503, 487, 462, 449, 455]
          ]
        },
        {
          "label": "7 days",
          "delta": -3.1,
          "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          "data": [[188, 181, 176, 184, 195, 168, 159], [520, 498, 471, 505, 548, 447, 421]]
        },
        {
          "label": "30 days",
          "delta": -9.2,
          "labels": ["3/10", "6/10", "9/10", "12/10", "15/10", "18/10", "21/10", "24/10", "27/10", "30/10"],
          "data": [
            [196, 201, 193, 188, 190, 184, 179, 183, 177, 181],
            [560, 575, 548, 531, 540, 512, 498, 507, 489, 494]
          ]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chartc-title">Line chart</h3>
  <p class="u-chartc-desc">Two smooth series that draw themselves on entry. Hover a point in time and the title, number and tiles show that moment.</p>
</article>

Installation

Just this chart, with the core and the tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add line

Dependency 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-line

Family 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	no default	Value suffix, like ms. With latency, a drop is good and the badge turns green.
`series`	array	no default	List of `{label}`.
`periods`	array	no default	List of `{label, delta, labels, data}`. Each period can have a different number of points.
`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 over the period"`.
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.