JST deliberately ships no chart component. Charts are not a JST problem: any charting library drops straight in. This page renders the same eight-point dataset (monthly active users, two series) with three different open-source libraries, each inside its own JST component. The pattern is identical for all three, so pick your favourite library.
Each component receives the dataset as a declared property
(.data="$(dataset)", attributes down) and builds its chart in
once('chart', () => { ... }), returning a cleanup that
destroys the chart on disconnect. When the data property is republished the
component re-renders and pushes the new data into the existing chart.
The chart mount is marked jst-preserve. That is the load-bearing
detail: JST re-renders by morphing, so without it the live canvas/SVG would
be reconciled away on every republish (the same reason it matters under a
jst-nav morph swap). Registered custom elements are already
preservation boundaries, so the JST wrappers compose without extra ceremony.
Colours are read from the JST theme variables
(--jst-accent, --jst-ok, --jst-fg,
--jst-muted, --jst-border) at render time.
Hit Toggle light / dark and every chart re-reads the variables
and re-themes: the charts are wired into the same theming story as the rest
of JST.
The Randomize data button is JST state: it emits an event up, the page hands a new dataset down, and all three libraries re-render through the one attributes-down flow. Watch the JST-rendered "first point" number change in lock-step with the charts.
Three canvas/SVG libraries, three rendering models, zero JST-specific adapters. JST stayed a thin controlled-renderer layer over the light DOM; the libraries did their own thing inside a preserved mount node. That is the whole trick, and it works for maps, editors, video players, or anything else you already use.