Skip to main content

<AreaChart>

component@pond-ts/chartssource

An area draw layer: fills between a value column and a baseline, with a graded (gradient) shade — opaque at the line, transparent at the baseline — and an outline stroke on top. Reads column into a ChartSeries (columnar, gaps as NaN), registers into the enclosing Layers (scaling against its axis), and renders nothing to the DOM — the row draws it. The fill + outline break at gaps rather than spanning them.

Two forms via baseline (see AreaChartProps.baseline): omit it for the elevation form (rest on the axis floor) or pass 0 for the above/below-axis form (positive up, negative down). The esnet two-colour traffic look composes two layers, each with its own as role:

<Layers>
  <AreaChart series={s} column="in"  baseline={0} as="in" />
  <AreaChart series={s} column="out" baseline={0} as="out" />
</Layers>

Props

columnstringrequired

Name of the numeric value column to fill from.

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 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>). Either way column names the numeric value to fill from.

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).

asstring

The series' semantic identifier — what the data is / how it should read (e.g. elevation, or a signed-traffic role like in / out). The theme maps it to an AreaStyle (theme.area[as] ?? theme.area.default) — outline colour/width + the graded fill. Omitted ⇒ the default style; there's no per-component colour/style override (restyle via the theme, the single styling channel).

axisstring

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

baselinenumber

The value the fill rests on — the flat edge opposite the value line. Two forms:

  • Omitted ⇒ the axis's lower bound (the bottom of the plot): the elevation form — fill from the line down to the floor, shade grading down.
  • A number (e.g. 0) ⇒ a fixed baseline: the above/below-axis form — values above it fill up, below it fill down, each side's shade fading toward the baseline. For the esnet two-colour traffic look, compose two <AreaChart>s (an "in" column and an "out" column, distinct as roles).

A fixed baseline is pulled into the auto-fit domain so the baseline line is always visible (an above/below area with baseline={0} shows the zero 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 path interpolation for the outline + fill edge — a view concern (denoise the data with pond's smooth() upstream). Omitted ⇒ 'linear' (straight segments). 'monotone' is a smooth edge that still passes through points.

gapsGapModeGapModetype@pond-ts/charts'none' | 'empty' | 'dashed' | 'step' | 'fade'

How a gap-aware draw layer (LineChart / AreaChart) renders a gap — a run of non-finite (NaN) samples, the signal a coast / dropout / missing bucket leaves in the columnar data (Number.isFinite, never != null; see docs/rfcs/charts.md trap #2). One concept shared across a line and its area fill, so both speak the same vocabulary.

How a gap (a coast / dropout — a run of NaN in column) is rendered (a GapMode). Omitted ⇒ 'empty': the fill and outline break at the gap, leaving a hole (the honest default). 'none' fills + bridges straight across. For 'dashed' / 'step' / 'fade' the fill stays broken and only the outline gets the inferred connector across the gap — a faint dashed straight bridge, a faint flat dashed line at the average of the edge values, or estela's fade-to-baseline (which drops to this area's own baseline, the fill floor). Shared with <LineChart> — one concept. (The 'dashed' / 'step' connector faintness is the theme's gap.connectorOpacity.)