Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Stacked Area Chart

Two series stacked into one filled total, so you read each part and the whole across six months. Desktop and mobile visitors in React.

Framework
Charting library

Preview

Preview width

About

Use it when the total matters and so does its split: traffic by device, revenue by plan, tickets by team. The top edge is the total; the boundary inside it is the split. For shares rather than amounts, use the expanded version. For series that don't add up to anything, use a multiple line chart.

Mobile sits at the bottom with desktop stacked on it, each a smooth curve with a 40% fill in its own color. Hovering a month lists both values with a dot beside each.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartAreaStacked } from "@/components/charts/chart-area-stacked";
<ChartAreaStacked />

Customize

  • Two <Area> elements share stackId="a", which stacks them; the first, mobile, is the bottom band.
  • Each <Area> sets type="natural", fillOpacity={0.4} and its own var(--color-<key>) for fill and stroke.
  • <ChartTooltipContent indicator="dot" /> lists both series for the hovered month; cursor={false} hides the hover cursor.
  • Recharts reports each series' own value in the tooltip, not the stacked height.

FAQ

How do I choose which series sits at the bottom?

The order of the <Area> elements that share stackId="a": the first one is drawn at the bottom. Move the desktop <Area> above the mobile one to swap them.

How do I stack a third series?

Add a third <Area> with the same stackId="a", its own dataKey and fill/stroke of var(--color-<key>), and a chartConfig entry for the key. Past two series, add a legend.

How do I show the total in the tooltip?

The tooltip lists one row per <Area>. For a total, pass ChartTooltipContent a formatter that adds a row after the last item, as the Advanced Tooltip chart does; each call gets the item and the whole data row.

Can the areas overlap instead of stacking?

Remove stackId from both <Area>s. Each then starts at zero and the later one draws over the first, so keep fillOpacity low.

How do the colors change in dark mode?

chartConfig points desktop at var(--chart-1) and mobile at var(--chart-2). Both tokens have a dark value in your theme, so the bands change with the .dark class. Give an entry theme: { light, dark } to pick both colors yourself.

Can I step through it with the keyboard?

accessibilityLayer on <AreaChart> makes it focusable: Tab in, then the arrow keys move the tooltip from month to month with both series in it.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts