Cheat sheet

One-screen reference for the whole @pond-ts/charts surface — the data each layer takes, what it can do, and the container/axis knobs. For the narrative, follow the links; this page is the scan.

Draw layers — data contract

What each layer reads, its theme slot, and its one sharp edge. (The View-builder column exposes the chart-ready view shape for custom draw code — starting from a pond series, the component itself is the whole contract.)

Layer	Series / input	Key columns	View builder	Theme slot	Sharp edge
LineChart	TimeSeries | ValueSeries	one numeric column	fromTimeSeries	theme.line	curve smooths the drawing, not the data — denoise with smooth().
AreaChart	TimeSeries | ValueSeries	one column, fill from baseline	fromTimeSeries	theme.area	Gaps couple fill+outline; fill must be CSS hex.
BandChart	TimeSeries | ValueSeries	two columns lower + upper	bandFromTimeSeries	theme.band	Always breaks on a gap (no gaps prop, by design).
ScatterChart	TimeSeries | ValueSeries	column (y) + optional radius/color cols	fromTimeSeries	theme.scatter	Data-driven radius/colour are column+range only; ramp stops hex.
BarChart	TimeSeries/ValueSeries/Map xor bins xor categories	column xor columns[]	barsFrom* / stacksFrom* / categoryStack	theme.bar	One-of series/bins/categories & column xor columns — else throws.
BoxPlot	TimeSeries | ValueSeries	lower+upper req; q1/q3/median opt	boxFromTimeSeries	theme.box	Doesn't compute quantiles; q1/q3 both-or-neither throws.
Candlestick	TimeSeries only	open/high/low/close	ohlcFromTimeSeries	theme.candle	Any price missing ⇒ no candle; default pair is neutral, not red/green.

Row lists — standalone (no ChartContainer)

One DOM table row per entity on one shared value scale; label + data cells, sortBy/custom sort, per-row expander, reference markers. Not draw layers — the in-plot histogram stays <BarChart orientation="horizontal">.

Component	Input	Key props	Reader	Theme slot	Sharp edge
BarList	series or rows: ListRow[]	columns (values names), cells, sort, renderExpanded	series direct (or ListRow[] records)	theme.bar	Non-negative values assumed (length-encoded from the domain min).
BoxList	series or rows: ListRow[]	five-number names + value tick per column, same table props	facts by hand (partitionBy + reduce spread)	theme.box	Doesn't compute quantiles; q1/q3 both-or-neither throws.

Capability matrix

Which x-axis kinds each layer supports, whether it reads out under the cursor, whether its marks are selectable, and how it handles a NaN gap.

Layer	X-axis kinds	Cursor readout	Selection	Gap handling
LineChart	time · value	✅ all modes	—	gaps prop — all 5 modes
AreaChart	time · value	✅ (rides the value edge)	—	gaps prop — fill+outline coupled
BandChart	time · value	✅ (both edge values)	—	always breaks (no gaps prop)
ScatterChart	time · value	✅ (snaps to nearest point)	✅ id-gated	NaN point not drawn
BarChart	time · value · category	⚠️ single-series vertical only	✅ id-gated	NaN bucket → no bar
BoxPlot	time · value	✅ crosshair snaps to the nearest quantile	—	box missing a present quantile → nothing
Candlestick	time only	✅ participates in crosshair x-snap	—	candle missing any OHLC → nothing

Only ScatterChart and BarChart are selectable (both gated on an id). category axis is BarChart-only (its categories mode).

Container, row & axis knobs

The composition props, one line each. Full detail on Axes, Layout, and Interaction.

<ChartContainer>

Prop	Default	What
width	— (req)	Total width in CSS px (plot + gutters). Real pixels, not %.
range	auto-fit	Shared x domain [begin, end] or TimeRange.
theme	defaultTheme	The one ChartTheme — see Theming.
calendar	—	Trading-time axis from a TradingCalendar (+ spacing).
sessionDividers	'none'	Session-seam verticals: 'labeled' / 'all' / 'none'.
grid	true	Reference gridlines behind the data.
rowGap	0	Vertical space between stacked rows (px).
showAxis	auto	Auto-render the shared x axis; a mounted <XAxis> replaces it.
timeFormat	d3 multi-scale	Time-axis + cursor-time formatting.
panZoom	false	Drag-to-pan + wheel-to-zoom.

<ChartRow>

Prop	Default	What
height	— (req)	Row height in CSS px.

Cursors

Mount one inside <ChartContainer> to get a cursor — or inside a <ChartRow> to override it for that row. Mount none for no cursor.

Component	What
<LineCursor />	Synced vertical line (showTime for the time atop).
<PointCursor />	A dot on each series, no line.
<InlineCursor />	Dots plus a value chip beside each series.
<FlagCursor />	Dots plus value flags.
<CrosshairCursor />	Snapped reticle + axis pills (snap, format).
<RangeCursor />	Bucket shading + drag-to-select (sequence, onDragRelease).

<YAxis> / <XAxis>

Prop	On	What
id	YAxis	Scale id a layer binds to via axis; first-declared = row default.
side	YAxis	'left' (default) / 'right'.
min / max	YAxis	Explicit domain bounds; omit to auto-fit.
format	Y/XAxis	d3 specifier or (v) => string; hoist an inline function.
dateStyle	XAxis	Time axis: 'flat' (default) inline periods / 'stacked' band row.
transform	XAxis	Relabel the same scale into a derived unit (dual x-axis).

Also

• Studies (financial indicators) — the Financial charts hub (sma, ema, bollinger, …).
• Annotations (Region / Marker / Baseline, indicators) — the Annotations & indicators section.
• Live data — a LiveSeries renders through the same layers; see Learn charts ch. 8.
• The API reference for every prop and type.