Trend · Basic

Area chart

Running totals and a changing mix (stacked, 100% stacked).

Open in playground

Use when: Seeing how each channel's traffic changes within the total
Avoid when: The exact value of each series matters

Try it

Reduce motion

Area chart

Monthly visits by channel (thousands)

Search
Social
Direct
Referral

Area chart data
Jan	Search 120, Social 70, Direct 80, Referral 30
Feb	Search 133, Social 76, Direct 83, Referral 32
Mar	Search 139, Social 78, Direct 86, Referral 34
Apr	Search 139, Social 80, Direct 86, Referral 36
May	Search 138, Social 86, Direct 84, Referral 38
Jun	Search 142, Social 98, Direct 81, Referral 40
Jul	Search 154, Social 115, Direct 77, Referral 42
Aug	Search 167, Social 131, Direct 75, Referral 44
Sep	Search 176, Social 142, Direct 74, Referral 46
Oct	Search 177, Social 147, Direct 75, Referral 48
Nov	Search 176, Social 149, Direct 78, Referral 50
Dec	Search 178, Social 151, Direct 82, Referral 52

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example area --variant <id>) and the MCP server know the same names.

100% stacked

Monthly visits by channel (thousands)

Search
Social
Direct
Referral

Overlapping

Monthly visits by channel (thousands)

Search
Social
Direct
Referral

Code

AreaChart.tsx

import { ChartCard, AreaChart } from "ztd-charts";

const data = [
  {"month":"Jan","channel":"Search","visits":120},
  {"month":"Jan","channel":"Social","visits":70},
  {"month":"Jan","channel":"Direct","visits":80},
  {"month":"Jan","channel":"Referral","visits":30},
  {"month":"Feb","channel":"Search","visits":133},
  {"month":"Feb","channel":"Social","visits":76},
  // … 42 more rows
];

export function Example() {
  return (
    <ChartCard number="14" title="Area chart" subtitle="Monthly visits by channel (thousands)" takeaway="Social's share grows the fastest" level="basic" replay>
      <AreaChart
        data={data}
        x="month"
        y="visits"
        series="channel"
        highlight="Social"
      />
    </ChartCard>
  );
}

Props

<AreaChart> takes these props. Rows marked Common work the same on every chart.

45 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`x`Requiredx fieldstring \| (d, i) => any	string \| (d, i) => any	-	x field
`y`Requiredy field. An array for wide tablesstring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	y field. An array for wide tables
`series`Series fieldstring \| (d, i) => string	string \| (d, i) => string	-	Series field
`lower`Lower bound of the range band, with stack "none" only. In wide tables an array in the order of ystring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	Lower bound of the range band, with stack "none" only. In wide tables an array in the order of y
`upper`Upper bound of the range band. Same shape as lowerstring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	Upper bound of the range band. Same shape as lower
`stack`Stacking mode"none" \| "stacked" \| "percent"	"none" \| "stacked" \| "percent"	-	Stacking mode
`curve`Line shape"smooth" \| "linear" \| "step"Default `"smooth"`	"smooth" \| "linear" \| "step"	"smooth"	Line shape
`xType`Sets the x type yourself. Automatic when omitted: ISO dates, dotted dates such as "2025.03.01", Korean year-month-day dates, quarters such as "2024Q1" and English month names are read as dates. With "date", 10-digit numbers are Unix seconds"number" \| "date" \| "band"	"number" \| "date" \| "band"	-	Sets the x type yourself. Automatic when omitted: ISO dates, dotted dates such as "2025.03.01", Korean year-month-day dates, quarters such as "2024Q1" and English month names are read as dates. With "date", 10-digit numbers are Unix seconds
`dayFirst`Reads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.yearboolean	boolean	-	Reads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.year
`aggregate`How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows"sum" \| "mean" \| "last" \| "count"Default `"sum"`	"sum" \| "mean" \| "last" \| "count"	"sum"	How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows
`zero`Include 0 on the y axisbooleanDefault `true`	boolean	true	Include 0 on the y axis
`endLabels`Series name tags at the right endboolean	boolean	-	Series name tags at the right end
`yDomain`Fixed y rangenumber[]	number[]	-	Fixed y range
`maxPoints`Above this many points, LTTB downsamples the linenumber	number	-	Above this many points, LTTB downsamples the line
`brush`Drag to select a range. true shows the change and the high and low, "zoom" zooms into the range (keyboard: Shift+arrows, Enter)anyDefault `false`	any	false	Drag to select a range. true shows the change and the high and low, "zoom" zooms into the range (keyboard: Shift+arrows, Enter)
`annotations`Notes drawn on the chart: target band, period, reference line, event, forecast, trend line, weekend shading. [{ type, x, y, from, label }]annotations	annotations	-	Notes drawn on the chart: target band, period, reference line, event, forecast, trend line, weekend shading. [{ type, x, y, from, label }]
`signColors`Colors the highlighted series differently above and below baseline (profit and loss). Only with stack "none"booleanDefault `false`	boolean	false	Colors the highlighted series differently above and below baseline (profit and loss). Only with stack "none"
`baseline`Value that splits signColorsnumberDefault `0`	number	0	Value that splits signColors
`downColor`Color below the baseline (token name or CSS color)stringDefault `"neutralStrong"`	string	"neutralStrong"	Color below the baseline (token name or CSS color)
`bandFrom`Where the range band starts. "forecast" starts it at the forecast annotation"start" \| "forecast"Default `"start"`	"start" \| "forecast"	"start"	Where the range band starts. "forecast" starts it at the forecast annotation
`outside`Mark points outside the range band and count them in the descriptionbooleanDefault `false`	boolean	false	Mark points outside the range band and count them in the description
`connectNulls`Join the line across missing values (null, NaN or no row at that x). By default the line and its area break there, and a point left alone shows as a dot. Stacked areas ignore itbooleanDefault `false`	boolean	false	Join the line across missing values (null, NaN or no row at that x). By default the line and its area break there, and a point left alone shows as a dot. Stacked areas ignore it
`hidden`Series to hide. Colors stay as if every series were shown. With card.legend "toggle", viewers can show them againstring[]	string[]	-	Series to hide. Colors stay as if every series were shown. With card.legend "toggle", viewers can show them again
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Variants

Code

Props

Also in Trend