Skip to main content

<BandChart>

component@pond-ts/chartssource

A variance-band draw layer: fills the envelope between the lower and upper columns of series (typically rollingByColumn percentiles), gap-aware, and registers itself into the enclosing Layers. Renders nothing to the DOM — the row draws it.

Compose two for a two-tone spread — author the wider band first so it sits behind (declaration order = z-order, back-to-front), then the line on top:

<Layers>
  <BandChart series={s} lower="p5"  upper="p95" as="outer" />
  <BandChart series={s} lower="p25" upper="p75" as="inner" />
  <LineChart series={s} column="p50" />
</Layers>

Props

lowerstringrequired

Name of the numeric column for the band's lower edge (e.g. p25).

seriesTimeSeriesTimeSeriesclasspond-ts

An immutable, schema-typed, ordered collection of events — the batch layer's core primitive. A series is constructed whole from complete data and never mutated: every transform (filter, align, rollup, …) returns a new TimeSeries, so the full analytical surface can sort, scan, or index freely. Example: new TimeSeries({ name, schema, rows }).

<S> | ValueSeriesValueSeriesclasspond-ts

A value-keyed series — the closed value-axis counterpart of TimeSeries. Its key is a monotonic non-time axis (distance, cumulative work, …). Two doors in: project a TimeSeries onto one of its monotonic columns (TimeSeries.byValue(axis) — a track re-keyed by cumulative distance), or construct directly from columnar arrays (`ValueSeries.fromC…

<VS>required

The source series. A TimeSeries fills the envelope against the time axis; a ValueSeries (series.byValue('dist')) against its value axis — the container infers which from the data, no axis-type prop (mirrors <LineChart> / <AreaChart>). Either way lower/upper name the numeric edge columns.

Live charts: series.byValue(…) mints a fresh projection each call, so an inline series={s.byValue('dist')} re-registers this layer every render — on a frequently re-rendering chart, memoize the projection (useMemo).

upperstringrequired

Name of the numeric column for the band's upper edge (e.g. p75).

asstring

The band's semantic identifier — what the spread is (e.g. outer for a p5/p95 envelope, inner for p25/p75). The theme maps it to a BandStyle (theme.band[as] ?? theme.band.default). Omitted ⇒ the default band style — no per-component fill/opacity override (restyle via the theme, the single styling channel).

axisstring

Which <YAxis> (by its id) this band scales against — the scale, where as picks the style. Omitted ⇒ the row's default axis.

curveCurveCurvetype@pond-ts/charts'linear' | 'monotone' | 'natural' | 'basis' | 'step'

Render-time path interpolation for a line / band — how the path is drawn between points, a pure view concern (it does not change the data; denoising is pond's smooth(), upstream). Sparse aggregated bands look angular as a polyline; a curve smooths the path (RTC's interpolation).

Render-time edge interpolation — both edges drawn with this curve. Omitted ⇒ 'linear'. Prefer a symmetric curve ('natural'/'basis') to smooth a sparse aggregated envelope (RTC's interpolation) — 'monotone' assumes increasing x and smooths the right→left lower edge asymmetrically. Denoise the underlying values with smooth(), not this.