Charts A

Combo

Bars on one axis and a rate line on the other, volume and conversion together.

data-u="combo"Family A

Example

Combo chart

Bars on one axis and a conversion line on the other, so volume and rate read together on one screen.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="combo" data-u-props='{
      "label": "Orders",
      "bars": {"label": "Orders"},
      "line": {"label": "Conversion"},
      "periods": [
        {
          "label": "This year",
          "delta": 9.4,
          "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          "bars": [1220, 1290, 1380, 1350, 1460, 1550, 1510, 1610, 1700, 1670, 1840, 2060],
          "line": [3.5, 3.7, 3.9, 3.8, 4.1, 4.3, 4.2, 4.4, 4.6, 4.5, 4.7, 4.9]
        },
        {
          "label": "Last year",
          "delta": 6.1,
          "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          "bars": [1000, 1050, 1100, 1100, 1150, 1250, 1200, 1300, 1350, 1350, 1450, 1650],
          "line": [3.1, 3.3, 3.5, 3.4, 3.7, 3.9, 3.8, 4, 4.2, 4.1, 4.3, 4.5]
        },
        {
          "label": "Last 12 months",
          "delta": 7.8,
          "labels": ["Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],
          "bars": [2150, 1300, 1350, 1450, 1400, 1550, 1650, 1600, 1700, 1800, 1750, 1950],
          "line": [5, 3.6, 3.8, 4, 3.9, 4.2, 4.4, 4.3, 4.5, 4.7, 4.6, 4.8]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Combo chart</h3>
  <p class="u-chart-desc">Bars on one axis and a conversion line on the other, so volume and rate read together on one screen.</p>
</article>

Installation

Just this chart, with the core and the tokens:

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

No dependency The chart file already brings its own shell.

The full card from the example, as HTML ready to paste:

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

Family A: shell u-chart-card > u-chart-panel > the data-u, then h3.u-chart-title and p.u-chart-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.
`bars`	object	no default	`{label}` of the bar series.
`line`	object	no default	`{label}` of the line, in %.
`periods`	array	no default	List of `{label, delta, labels, bars, line}`.
`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 month"`.
period toggle	`role="radiogroup"`, `role="radio"`	Current period in `aria-checked`.
period list	`role="listbox"`, `role="option"`	Opens with `aria-expanded` and marks the option in `aria-selected`.

Keyboard

Key	Does
Left and right arrows	change the period in the toggle
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.