Skip to main content

Gallery

Eight live, touchable charts — not thumbnails. Hover any of them to see the crosshair track; each is the exact same @pond-ts/charts primitives you'd compose yourself. Click a card's Story link to jump to its full Storybook coverage (every prop, every variant).

Ops dashboard

Requests/sec over error rate — two rows, one shared time axis and cursor.

Story ↗

Financial terminal

Daily OHLC candles with the crosshair cursor and the axis-pill OHLC readout.

Story ↗

Activity chart

A ride's elevation profile, filled — the shape an activity tracker reaches for constantly.

Story ↗

Annotated chart

Latency data with an incident region, a deploy marker, and an SLA baseline — two registers, one hue rule.

Story ↗

Variance band

A rolling p5–p95 latency envelope with the p50 centreline — nested bands plus a line.

Story ↗

Distribution

Response-time histogram on a value axis, inferred from the bins — not a time axis.

Story ↗

Trade ticks

A data-driven scatter: radius encodes trade size, colour encodes up/down.

Story ↗

Latency percentiles

Hourly box-and-whisker buckets from five pre-computed quantile columns.

Story ↗

Where these come from​

Every card above is one of the chart-type support matrix's draw layers, seeded with deterministic sample data (no Math.random(), no Date.now() — what you see is what renders on every visit). None of it is a special "demo mode": the same ChartContainer / ChartRow / Layers composition you'd write yourself, mounted for real.

  • Storybook — the systematic, per-prop knob walk each card's Story link jumps into.
  • Using @pond-ts/charts — install notes and integration gotchas.
  • Theming charts — the ChartTheme model behind every card here (they all run the docs site's own live theme, useSiteChartTheme).