Skip to content
InsightCharts

Search

Search guides and components

Area chart

Shows a quantity over time as a filled area from zero: one series, stacked series, shares of 100%, or a streamgraph.

Use when
A volume or cumulative quantity over time where the filled magnitude matters; stacked when the total and its composition both matter; percent when only the mix matters; stream for the changing mix of many series over a long period.
Avoid when
Comparing the trajectories of several series against each other (use line chart: only the bottom band of a stack has a flat baseline); a few time points (use bar chart with stack); more than about 6 bands.

Preview

World solar capacity rose from 180 GW in 2014 to 1,610 GW in 2023

Cumulative installed solar PV capacity, gigawatts

Source: IRENA, Renewable Capacity Statistics (rounded) · Figures are approximate, for illustration

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

1 infographic uses area chart.

Infographics

1

Atlas poster

A landscape spread of up to eleven small illustrations of one subject, each a different graphic form, in three bands of unequal panels: a statement in large type, spokes round an icon and a network of circles; a smooth trend with its peak labelled, nested squares and a slope chart; a pill ranking, a treemap, a tile map and sized circles; and a closing row of icon statements.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/area-chart

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { AreaChart } from "insightcharts";

Examples

Stacked, labelled in the bands

Wind and solar generated 4,620 TWh of electricity in 2024

World electricity generation by source, terawatt-hours

Source: Ember, Global Electricity Review (rounded) · Figures are approximate, for illustration

100% stacked with highlight

Wind and solar's share of electricity rose from 0.2% in 2000 to 15.8% in 2024

Share of world electricity generation

Source: Ember, Global Electricity Review (rounded) · Figures are approximate, for illustration

Streamgraph, long format

Monthly hours watched by genre, 2021 to 2024

Millions of hours per month, six genres

Illustrative data

Overlapping washes

July bike-share trips rose from 134,000 in 2023 to 152,000 in 2024

Bike-share trips per month, thousands

Illustrative data

Props

PropTypeDefaultDescription
xrequiredstringTime or ordered category field. ISO dates are placed on a true time axis.
yrequiredstring | string[]Value field, or several (one area each).
seriesstringField that splits rows into areas (long data).
stackboolean | "percent"falseStack the areas; percent normalises every x position to 100%.
streambooleanfalseStreamgraph: stack around a centred baseline. The value axis is dropped because only band thickness is readable.
curve"linear" | "smooth" | "step""linear"Edge shape. A streamgraph defaults to smooth.
labelsbooleanName each band inside itself where it fits; the rest go to the legend. Default: on when stacked.
namesRecord<string, string>Display names for series keys.
Common chart props 29

Every chart built with defineChart accepts these on top of its own props.

PropTypeDescription
dataDataInputRows, CSV text, a URL, { url, path }, an async function, or an Arrow-style table. Omit inside <InsightData>.
transformTransform | Transform[]A pipeline of transforms applied before drawing.
titlestringThe title. One plain statement of what the data shows, with the number and the period ("Monthly churn fell from 4.2% to 2.1% in 2024"), or a plain label ("Monthly churn, 2024"). One clause, no figures of speech.
subtitlestringMeasure, unit, population, period.
sourcestringData source, shown as "Source: ...".
notestringMethod notes or caveats.
heightnumber | stringCSS height of the plot. Default 360.
aspectnumberWidth / height. Overrides height.
highlightstring | string[]The entity (or entities) the title is about. Every other series is drawn in grey.
annotationsAnnotation[]Reference lines, shaded bands and callouts, in data coordinates.
formatFormatSpecHow to print values: "compact", "percent", "currency:USD", "{value} kg", Intl options, or a function.
legendbooleanShow the legend. Default: shown when there are two or more series.
selectboolean | stringMake marks clickable to filter. Inside <InsightData> the selection filters every other chart. Pass a field name, or true to use the chart's category field.
onSelect(values: string[], field: string) => voidCalled with the selected values whenever the selection changes.
optionEChartsOption | ((option: EChartsOption, ctx: BuildContext) => EChartsOption)Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers.
themeThemeInputA theme, or a partial set of tokens merged over the surrounding theme, for this chart only.
modeModeInput"auto" (default) follows the page, "system" follows the OS, or force "light" / "dark".
rendererRendererInput"auto" (default) uses SVG for light charts and canvas for heavy ones.
animatebooleanSet false to disable animation. Reduced-motion preferences are always respected.
lazybooleanMount the chart only when it scrolls near the viewport. Default true.
groupstringLink tooltips with other charts sharing this group id.
exportableboolean | ExportFormat[]Show an export menu: true or a list of formats from png, jpeg, svg, pdf, csv, json.
tablebooleanShow a collapsible "View data" table under the chart.
altstringAccessible description: the chart type and measures, then the main pattern and the notable values.
idstringStable id for this chart's selection in the shared store.
onEventsRecord<string, ChartEventHandler>ECharts event handlers, e.g. { click: (params, chart) => {} }. Prefix a name with zr: to bind to the canvas itself.
onReady(chart: EChartsInstance) => voidCalled with the ECharts instance once it is created.
classNamestringClass name for the outer <figure>.
styleCSSPropertiesInline style for the outer <figure>.