Charts

Authoring

import { Figure } from '@csdr/editorial';
import LineChart from '@csdr/charts/LineChart.astro';

<Figure id="fig-annual" caption="Annual mean CO₂ at Mauna Loa." source="NOAA GML." width="wide">
  <LineChart data={rows} x="year" y="mean" unit="ppm" yLabel="CO₂ (ppm)" alt="One line rising from 316 to 427 ppm, 1959–2025." />
</Figure>

data is an array of tidy rows. Wide data: y="col" or y={["a","b"]}. Long data: y="value" series="basin". Options: unit, xLabel, yLabel, stack, area, horizontal, format (number | percent | compact), yMin/yMax (numbers or dataMin), markLines, legend, height, interactive, filename.

alt is required: one sentence saying what the chart shows (shape and endpoints), not what it is.

What every chart ships

• SVG rendered at build (light theme, animation off, chart disposed) — prints and exports without JavaScript
• View data — a table generated from the same rows (the WCAG fallback)
• Download data (CSV) and Download chart (SVG)
• With interactive: an ECharts island (client:visible) that shows the SVG until it mounts, then draws with the SVG renderer so print still works; it follows data-theme on theme-aware pages

Charts with more than 1,000 marks are rendered as islands automatically (file-size guard).

Text metrics

Node has no canvas, so ECharts measures text with a glyph-width table. If @napi-rs/canvas installs (it is an optional dependency), the renderer registers the Red Hat fonts and measures for real, so long labels behave as in the browser. Nothing changes in your code either way.

The theme

packages/charts/src/theme.ts is a plain ECharts theme object built from palette values generated by scripts/palette-build.mjs (not from @patternfly/react-charts, whose ECharts theme returns wrong values in Node). Every palette (D13) carries its own validated categorical order, a single-hue sequential ramp, a two-arm diverging ramp and reserved status colours; charts take the page’s palette automatically (data-palette, set by the layout) — see the swatches and validator report on /design/palette/. Assign series in the fixed order, never cycled; status colours are never reused for series.

Rules of the house: one y-axis per chart; a legend whenever there are ≥ 2 series (and direct end-labels up to 4); gridlines on; no number on every point; text in text tokens, never in the series colour.