Skip to main content

Learn charts

A nine-chapter tutorial track for @pond-ts/charts — start here if you're new to the library, not just looking something up (that's the Overview and the Gallery).

Every chapter has at least one live chart embed — the code shown is the exact component mounted on the page, never a fragment you can't run yourself. Cursors and hover work from chapter 1 on; you're touching the interaction system before it's formally taught.

One running example threads the whole track: a small seeded server metrics series (cpu + latency per host, on a one-minute grid) — the same dataset chapter 1's chart renders is the one chapter 2 adds a second axis and a second row to.

  1. Your first chart — install, render, the four components every chart needs. Under 10 minutes to a working chart.
  2. Anatomy of a chart — a second axis, a second row, the Layers z-stack, and a caution about prop identity.
  3. Feeding charts pond data — from "I have an API response" to a rendered series: fromJSON, temporal keys, what a draw layer actually reads.
  4. Shaping data to chart — the "make the most of pond" chapter: aggregate, rolling, partitionBy, and byColumn, each turning raw data into a chart-ready shape.
  5. Styling and theming — the styling pipeline in one sentence, and which of three theming approaches fits your app.
  6. Reading and selecting values — the five cursor modes, reading the hovered value outside the chart, and the select-to-zoom loop.
  7. Marking up charts — Region, Marker, Baseline, and a live YAxisIndicator pill — the annotation register, deliberately never the same hue as your data.
  8. Live charts — LiveSeries → useSnapshot → chart, the re-render model, and createLiveValue for a pill that skips the chart entirely.
  9. Beyond the time axis — the x axis is inferred from your data: a linear value axis, a category axis, or a session-aware trading-time axis.

That's the whole track. A dedicated reference section for interaction and annotations (deeper than this track's tour) is on the roadmap — see PLAN.md's "Docs site wave" for what's shipped and what's next. Until then, the Cursors & readouts and Annotations Storybook groups cover that ground directly.