LineChart

A gap-aware line through one numeric column. The default draw layer for a continuous series — over time, or over a value axis.

src/examples/first-chart.tsx

import {
  ChartContainer,
  ChartRow,
  Layers,
  LineChart,
  YAxis,
} from '@pond-ts/charts';
import { useSiteChartTheme } from '@site/src/theme/useSiteChartTheme';
import { singleHostSeries } from './lib/server-metrics';

export default function FirstChart() {
  const theme = useSiteChartTheme();
  const series = singleHostSeries();

  return (
    <ChartContainer range={series.timeRange()} width={560} theme={theme}>
      <ChartRow height={220}>
        <Layers>
          <LineChart series={series} column="cpu" axis="pct" />
        </Layers>
        <YAxis id="pct" side="right" format=".0%" />
      </ChartRow>
    </ChartContainer>
  );
}

Data contract

Takes a TimeSeries or ValueSeries and one numeric column (the y value); x comes from the series key (time) or axis (value). A NaN run is a gap — how it renders is the gaps prop. The explicit adapter is fromTimeSeries(series, column) / fromValueSeries(series, column).

Props

Prop	Type	Default	Purpose
series	TimeSeries | ValueSeries	— (req)	The source series.
column	string	— (req)	Numeric column to plot as y.
as	string	'default'	Style role → theme.line[as].
axis	string	row default	Which <YAxis id> to scale against.
curve	Curve	'linear'	Path interpolation (see variants).
gaps	GapMode	'empty'	How a NaN run renders.
sessionBreaks	boolean	false	Break the line at trading-axis session discontinuities.

Variants

• curve — 'linear' (default), 'monotone', 'natural', 'basis', 'step'. A view concern only; denoise the data with pond's smooth(), not the curve.
• gaps — 'empty' (default: break at the gap), 'none' (bridge across), 'dashed' / 'step' / 'fade' (faint connectors over the break). A NaN in the column is the gap; the mode is how it draws.
• sessionBreaks — a scale break (at session boundaries on a trading-time axis), orthogonal to gaps (a data break); set both independently.

Interaction & theming

• Cursor: participates in every readout mode (line/point/inline/flag/ crosshair) — the dot rides the line at the cursor, no readout past the data span.
• Selection: not selectable (no id); it's a display + readout layer.
• Theming: the theme.line slot (LineStyle = { color, width, dash? }). A dashed line for a modeled series comes from the theme role's dash, not a prop.

Cautions

• No per-component colour/width — style is the as role only, by design (style and scale are separate channels).
• curve smooths the drawing, not the data — for denoised values use smooth() upstream so the readout matches the line.

See also

• Axes · Layout — scale binding and rows.
• Storybook: Charts/LineChart — WithGap, LineStyles, GapAwareSmooth, the value-axis variants.
• The generated API reference — the full LineChartProps type.