AreaChart

A filled area from a baseline up to one column. Reach for it for magnitude / volume, or an above-below split around a fixed line.

src/examples/gallery-activity.tsx

import {
  AreaChart,
  ChartContainer,
  ChartRow,
  Layers,
  YAxis,
  LineCursor,
} from '@pond-ts/charts';
import { useSiteChartTheme } from '@site/src/theme/useSiteChartTheme';
import { elevationProfile } from './lib/gallery-fixtures';

/** Activity chart: a ride's elevation profile as a filled area — the shape
 *  an activity-tracking consumer (estela) reaches for constantly. */
export default function GalleryActivity({ width }: { width: number }) {
  const theme = useSiteChartTheme();
  const series = elevationProfile();

  return (
    <ChartContainer range={series.timeRange()} width={width} theme={theme}>
      <LineCursor />
      <ChartRow height={200}>
        <YAxis id="m" side="right" label="m" format=",.0f" width={44} />
        <Layers>
          <AreaChart
            series={series}
            column="elevation"
            axis="m"
            baseline="floor"
          />
        </Layers>
      </ChartRow>
    </ChartContainer>
  );
}

Data contract

Takes a TimeSeries or ValueSeries and one numeric column (the fill value); the fill runs from baseline up to it. View builder (for custom draw code): fromTimeSeries / the same ChartSeries a LineChart uses.

Props

Prop	Type	Default	Purpose
series	TimeSeries | ValueSeries	— (req)	The source series.
column	string	— (req)	Numeric column to fill from.
readout	string	—	Second column reported at the cursor (mirrors <LineChart>).
as	string	'default'	Style role → theme.area[as] (outline + graded fill).
axis	string	row default	Which <YAxis id> to scale against.
baseline	number | 'floor'	0	The level the fill rests on. Never changes the axis range.
curve	Curve	'linear'	Outline + fill-edge interpolation.
gaps	GapMode	'empty'	Gap rendering (fill/outline coupled — see cautions).
sessionBreaks	boolean	false	End the fill at trading-axis session discontinuities.
xOffset	number | duration	0	Draw each row this long after its key (as <LineChart>).

Variants

• baseline — omit it and the fill rests on zero: values above fill up, values below fill down. Pass another number for a different reference level (a target, an index's base of 100), or 'floor' to rest the fill on the bottom of the plot even when zero is on screen. The baseline never changes the axis range — the axis fits the data, as a line's does — so a baseline the axis doesn't reach rests the fill on the nearest edge. On data that never crosses zero the default therefore looks the same as 'floor'; to fill from zero, put zero on the axis with <YAxis min={0}>. The two-colour traffic look is two <AreaChart>s with in / out roles over the default zero.
• curve — 'linear' (default) / 'monotone' / 'natural' / 'basis' / 'step'.
• gaps — 'empty' (default) / 'none' / 'dashed' / 'step' / 'fade'.
• sessionBreaks — on a trading-time axis the fill and its outline end at each session's close and re-start at the next open, instead of shading across the collapsed gap. Same prop as <LineChart>'s, so the line and area styles of one intraday series break alike. gaps="none" still interpolates across a dropout inside a session, never across a break.
• xOffset — draw each row a fixed time after its key; see <LineChart>.

Interaction & theming

• Cursor: the readout dot rides the value edge (not the baseline), coloured by the outline stroke; no readout in gaps.
• readout (a second column): the tracker sample carries readout from another column while value stays the plotted number, so an off-chart readout can show a source value behind a derived plot (a smoothed / log / normalized line reading its raw sample). The in-chart dot and chips keep showing the plotted value — the dot has to sit on the line — so an off-chart consumer is the one that renders readout ?? value. A mistyped column name throws on both axis kinds.
• Selection: not selectable.
• Theming: the theme.area slot (AreaStyle = { color, width, fill, fillOpacity }); default roles default / in / out.

Cautions

• Gaps couple fill and outline: 'empty' breaks both; 'none' bridges both; 'dashed' / 'step' / 'fade' keep the fill broken and only connect the outline ('fade' drops the outline to this area's baseline). See Missing data & gaps.
• fill must be CSS hex (#rgb / #rrggbb) so the transparent gradient stop can be derived — a non-hex fill falls back to flat.

See also

• LineChart — the unfilled counterpart.
• Storybook: Charts/AreaChart — ZeroBaseline, Elevation, ReferenceLevel, AboveBelowAxis, TrafficAreas.
• The API reference — the full AreaChartProps type.