Docs Charts Programme

Animated charts programme

Shared chart-spec geometry, five framework adapters, and where the line falls between a chart variant, a composition, and a genuinely new family.

30 capabilities 5 adapters visual oracle pending

Scope

The source design contains 88 cards. Nineteen true-3D/isometric cards remain outside this programme, leaving 69 eligible source cards.

The uncovered work is implemented as 15 existing-family extensions, seven compositions/controllers, seven deterministic transforms, and one genuinely new family: SmithChart.

What's implemented

  • Existing chart extensions cover stroke gradients, arc/radial/bundled/metro network layouts, liquid gauge fill, dumbbells, horizon areas, streaming lines, geo routes/rings, cartograms, spiral timelines, vectors, labelled chords, and waveform bars.
  • Shared transforms cover Renko, Kagi, Point & Figure, ternary, QQ, SPC, volume profile, and word-pair chord mapping.
  • Composition helpers cover positioned layers, Venn circles, small multiples, aligned panels, Pareto, bar-race frames, log-scale Bode panels, and HOPs timing.
  • All five adapters expose the same generated public contracts. Smith also supports the shared shell controls, active datum, hidden series, renderer strategy, and data-summary slot.

Shared usage

Transforms and composition recipes are framework-neutral. Build the data once, then pass the result to an existing chart adapter.

import {
  pricesToRenkoBricks,
  sampleToQQ,
  createBarRaceFrames,
  createBodePanels,
} from "@grassroot/chart-spec";

const bricks = pricesToRenkoBricks(prices, 2);
const qq = sampleToQQ(sample);
const race = createBarRaceFrames(frames);
const bode = createBodePanels(points);

Two charts break the usual scale rules on purpose: Bode owns a logarithmic frequency scale, and Smith owns its specialised impedance grid. Everywhere else the normal chart defaults apply.

Verification

Contract parity is the cross-framework completion check:

pnpm contracts:generate
pnpm contracts:parity

The current gate reports zero differences across 96 UI components and 87 chart components. The browser source oracle isn't vendored at apps/grassroot/reference/animated-charts/, so visual source-card completion stays unclaimed until its pinned inputs are back.

See GRASSROOT_CHARTS_PROGRAM.md in the repository for the full source-card ledger and deliberate parity debt. The public chart catalogue is available from Charts.