shadcn.io is not affiliated with official shadcn/ui
Chart examples · Area
A stacked area chart for React
An area chart stacking desktop and mobile visitors so its top edge shows the monthly total.
Use it when both the parts and the total matter. Desktop and mobile share a stackId, so mobile sits on the baseline, desktop on top of it, and the top edge traces the monthly total.
Preview
Installation
FAQ
How do the two areas stack?
Both Area components set stackId="a". Mobile is first, so it sits on the baseline. Desktop is second, so it sits on top of mobile. The top edge of the desktop band is the month's total. Each row in chartData has both mobile and desktop.
How is each band colored?
Mobile fills and strokes var(--color-mobile). Desktop fills and strokes var(--color-desktop). Both set fillOpacity={0.4} and type="natural". config maps the keys to var(--chart-2) and var(--chart-1), with the labels Mobile and Desktop.
What does the tooltip show for a month?
ChartTooltipContent sets indicator="dot". The title is the month, and the rows are Mobile and Desktop from config, each with its own value. cursor={false} on ChartTooltip turns the hover cursor off.
How are the month labels shortened?
XAxis uses dataKey="month" and tickFormatter={formatMonth}, which returns value.slice(0, 3). axisLine and tickLine are false, and tickMargin is 8. CartesianGrid sets vertical={false}.
Related
- A stacked area chart with expand stackingA 100% stacked area chart showing each
- A simple area chartA single-series area chart with a smooth
- An area chart with a legendA stacked area chart of desktop and
- A stacked bar chart with a legendA bar chart stacking desktop and mobile
- A multiple line chartA line chart comparing desktop and mobile
- An area chart with gradient fillA stacked area chart whose areas fade