Charts · @csdr/charts

Chart, LineChart, BarChart

Build-time SVG charts from tidy rows with a data table and downloads; add `interactive` for an ECharts island.

Import: import LineChart from '@csdr/charts/LineChart.astro'
Use on: reports · landing · docs · tools

Authoring

Authors do not write ECharts options. LineChart and BarChart take tidy rows (data), an x column, one or more y columns (wide) or a series column (long), a unit, and a required alt. Everything else — legend, gridlines, tabular fallback, downloads — follows the chart theme.

Long data → series

View data

year	North (index)	South (index)
2019	12	8
2020	14	9
2021	13	11
2022	16	10

Download data (CSV)Download chart (SVG)

Figure 1.Illustrative index by basin.

Code

<Figure id="fig-basins" caption="Illustrative index by basin.">
  <LineChart data={rows} x="year" y="value" series="basin" unit="index" alt="Two lines: North rises from 12 to 16, South from 8 to 10, 2019–2022." />
</Figure>

Stacked bars, interactive

View data

year	North	South
2019	12	8
2020	14	9
2021	13	11
2022	16	10

Download data (CSV)Download chart (SVG)

Code

<BarChart data={rows} x="year" y="value" series="basin" stack interactive alt="…" />

`interactive` hydrates an ECharts island (client:visible) that shows the server-rendered SVG until it mounts; print still gets SVG.

Palette (validated)

Categorical order for light surfaces — PatternFly steps, run through the dataviz palette validator (lightness band, chroma floor, CVD ΔE, normal-vision floor, contrast). The first five pass all checks; the sixth needs secondary encoding.

#0066cc
#ca6c0f
#5e40be
#3d7317
#b98412
#147878 (secondary encoding)

Sequential: single blue ramp. Diverging: orange ↔ blue over a gray midpoint. Status colours are PatternFly's and never reused for series.