Four of River's chart deep-dives, rebuilt from merged @elabs-ai/components-charts props — no new component code, no fork. Each recipe ships twice: once composed from the container it is really made of, and once as the ChartSpec an agent would emit, so brand-ui chart-for and AutoChart reach the same picture.
Examples
Annotated Indexed Lines From Spec
The same recipe as a `ChartSpec`: `type`, `series[].color` and `annotations`.
Column Multiples Value In Title
**Column small multiples, value in the title.** Props: `ChartMultiples` `by` (one panel per country), `columns={{ base: 3, medium: 2, narrow: 1 }}`, `scales={{ y: "shared" }}` so the six countries are comparable, `sort="end"` and a `panelTitle` that prints the latest count — replaced by the hovered value while a panel is hovered. Fictional, seeded data.
Column Multiples From Spec
The same grid as a `ChartSpec`: `facet.by` + `facet.columns` on a bar spec.
Grouped Range Bars
**Grouped range bars with overlays.** Props: `BarChart groupBy="class"` (a bold header per class), `orientation="horizontal"`, and three `overlays` — a light `range` for the middle 90 %, a dark `range` for the middle 50 %, and a `value` tick for the average. Three overlays, three group headers. Fictional, seeded weights.
Grouped Range Bars From Spec
The same bars as a `ChartSpec`: `groupBy`, `orientation` and `overlays`.
Area Multiples Delta Figures
**Area small multiples with a delta figure.** Props: `ChartMultiples` `by="tech"`, `scales={{ y: "independent", rangeRounding: true }}` (each technology has its own order of magnitude), `sort="deltaPercent"` and a `panelTitle` showing the three-year change — swapped for the hovered price while `syncHover` is tracking. Fictional, seeded prices.
Area Multiples From Spec
The same grid as a `ChartSpec`: `facet.by`, `facet.scales` and `facet.sort`.