shadcn.io is not affiliated with official shadcn/ui
Chart examples · Area
An interactive area chart for React
A stacked area chart of three months of daily visitors with gradient fills and a legend.
Use it for daily data over weeks or months. Three months of daily desktop and mobile visitors are stacked with gradient fills, minTickGap thins the date ticks so they don't overlap, and a legend names both series.
Preview
Installation
FAQ
How does the axis skip dates?
XAxis sets minTickGap={32} and dataKey="date". Ticks closer than 32 pixels are skipped, so the daily rows from April through June don't pile up. tickFormatter is formatDateTick, which prints a short month and the day, like Apr 1.
How is the tooltip date formatted?
ChartTooltipContent sets labelFormatter to formatDateLabel. That calls toLocaleDateString with a short month and a numeric day, and it does not add the year. indicator is dot. cursor={false} turns the hover cursor off.
How do the fills fade?
Two linearGradient elements use the ids interactiveFillDesktop and interactiveFillMobile, from y1="0" to y2="1". Each fades from stopOpacity={0.8} at 5% to stopOpacity={0.1} at 95%. The areas set fill to url(#interactiveFillMobile) and url(#interactiveFillDesktop).
How are desktop and mobile stacked?
Both Area components set stackId="a" and type="natural". Mobile is first, on the baseline. Desktop is second, on top. Strokes are var(--color-mobile) and var(--color-desktop), from var(--chart-2) and var(--chart-1) in config.
Related
- An area chart with gradient fillA stacked area chart whose areas fade
- A simple area chartA single-series area chart with a smooth
- An interactive line chartA line chart of three months of daily
- An area chart with a legendA stacked area chart of desktop and
- Basic Data Table with CheckboxesA table of products with a checkbox on
- A multiple bar chartA bar chart grouping desktop and mobile