AreaChart
Charts

AreaChart

Filled time series: stacked for parts of a whole, overlaid for independent measures.

Component behavior

Use AreaChart when the area under the curve means something: revenue by product line, traffic by region, storage by tier. The fill conveys accumulated volume rather than a bare trajectory.

Use cases
  • Totals over time, divided into cumulative series with mode="stacked".
  • Independent series sharing a scale and period with mode="overlay".
  • Nonnegative volumes, counts, and balances.
Alternatives

LineChart: a line represents a rate or level without implying cumulative area.

BarChart: the x-axis contains discrete categories.

WaterfallChart: values may be negative; AreaChart clamps negative values to zero.

Sparkline: a chart must fit inline without axes.

Heatmap: series need separate rows to remain readable.

Props

AreaSeries contains values, label, and color. Arrays share the same time index; labels[i] names that index. Points have uniform spacing. Resample irregular timestamps before rendering. The first series determines point count. max overrides the data-derived upper bound.

AreaChartProps props
PropTypeDefaultDescription
seriesAreaSeries[]—Series in render order. Later series render above earlier ones. In stacked mode, the first series starts at zero.
labelsstring[]—X-axis category labels, one per data point. Omit and the x-axis row is not rendered at all.
heightnumber140Plot area height in pixels. The x-axis row and legend add to the total.
mode"stacked" | "overlay""stacked"Stacked mode sums series with 85% fill opacity. Overlay mode starts every series at zero with 18% fill opacity.
maxnumber—Upper y-axis bound. Defaults to the largest value or stacked total plus 8%.
formatValue(value: number) => string—Formats y-axis tick values. Defaults to Math.round. Tick values are derived from the domain.
ticksnumber4Y tick count, including both ends. Gridlines are drawn for all but the topmost.
curvedbooleantrueCubic smoothing with horizontal tangents at each point. A non-negative series never dips below its own baseline between samples. False draws straight segments.
legendbooleantrueAuto legend built from series labels and colors. Suppressed for a single series regardless of this flag.
renderTooltip(index: number) => ReactNode—Tooltip body for the hovered x index. The crosshair and per-series dots appear on hover whether or not this is set.
xLabelEverynumber—Show every Nth x label (1 = all). Defaults to roughly six labels total. Skipped slots stay in place, so labels never reflow.

Examples

Stacked

Stacked mode places each series above the preceding series. The top edge represents the total. Each band's thickness represents one series.

AreaChart stacked

Overlay

mode="overlay" places every series on the zero baseline and uses 18% fill opacity.

AreaChart overlay

Tooltips and tick formatting

Hovering selects the nearest x index and displays a crosshair and series markers. renderTooltip receives the index. The tooltip changes sides after 55% of the plot width. formatValue formats y-axis labels only.

AreaChart tooltip

Curved vs. straight

Smoothing is enabled by default and interpolates curved paths between measured points. Set curved={false} when straight segments are needed to represent sparse or discontinuous samples. The examples use identical data and max values.

AreaChart curved vs straight
ImportTSX
import { AreaChart } from "@solarius/onset";
import type { AreaSeries } from "@solarius/onset";

<AreaChart
  series={[
    { label: "Licenses", values: [45, 52, 48, 60], color: "var(--m-color-primary)" },
    { label: "Support", values: [25, 30, 28, 35], color: "var(--m-color-warn)" },
  ]}
  labels={["Jan", "Feb", "Mar", "Apr"]}
  mode="stacked"
/>
<AreaChart
  series={series}
  mode="overlay"
  curved={false}
  ticks={5}
/>