Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Expanded Stacked Area Chart

Three series stacked to 100% at every month, so each band reads as a share of the whole rather than an amount. Built for React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the mix matters more than the size: device share, plan mix, traffic sources. Every month fills the full height, so a band that widens is gaining share even if its count fell. For the amounts themselves, use the stacked area. For one moment's split, use a pie.

Other, mobile and desktop stack from the bottom up, each a smooth curve in its own color. Other is filled at 10% so the two main series stand out, and the value axis is left off, since every month ends at the same height.

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 { ChartAreaExpanded } from "@/components/charts/chart-area-expanded";
<ChartAreaExpanded />

Customize

  • stackOffset="expand" on <AreaChart> divides each month by its total, so every stack reaches 1.
  • Three <Area> elements share stackId="a". Their order sets the stack: other at the bottom, then mobile, then desktop.
  • fillOpacity={0.1} on the other area keeps it in the background; the other two use 0.4.
  • <ChartTooltipContent indicator="line" /> shows each series' raw value, not its share.

FAQ

How is it different from the stacked area chart?

The stacked area chart shows amounts: its top edge is the total. This one divides each month by its total, so the top edge is always 100% and each band is a share. A band can grow here while its count falls, if the others fall faster.

What makes every month fill to 100%?

stackOffset="expand" on <AreaChart>. Recharts divides each stacked value by its month's total, so the value axis runs from 0 to 1.

How do I label the shares on the side?

Add <YAxis tickFormatter={(value) => Math.round(value * 100) + "%"} />; with stackOffset="expand" its values run from 0 to 1.

What does the tooltip show, counts or shares?

Counts: Recharts passes each series' raw value to the tooltip. For shares, give ChartTooltipContent a formatter that divides the value by the row's total.

Why is the Other band so faint?

It's the least important series, so it's filled at 10% where mobile and desktop use 40%, and the eye goes to the two that matter. It has an areaY mark of its own for that: raise its fillOpacity, or drop the series, if it's a real category for you.

How do I change the order of the bands?

Reorder the <Area> elements: the first is drawn at the bottom. Put the series people compare most there, where its edge is a straight baseline.

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