shadcn.io is not affiliated with official shadcn/ui
Chart examples · Area
An area chart with gradient fill for React
A stacked area chart whose areas fade from the series color to transparent.
Gradient fills keep the area readable without a heavy block of color. Each series fills with an SVG linearGradient that fades from the series color at the top to nearly transparent at the bottom.
Preview
Installation
FAQ
How is the gradient defined?
Each series has a linearGradient in defs. Desktop's id is gradientFillDesktop, mobile's is gradientFillMobile. Both set x1="0", x2="0", y1="0", and y2="1", so the fade runs from the top of the area to the bottom.
What do the two stops do?
The first stop is offset="5%" with stopOpacity={0.8}. The second is offset="95%" with stopOpacity={0.1}. stopColor is var(--color-desktop) or var(--color-mobile), the same variables the strokes use.
How does the area use that gradient?
Area sets fill to url(#gradientFillDesktop) or url(#gradientFillMobile). It also sets fillOpacity={0.4}, which fades the whole gradient again. stroke stays the solid series color, and type is natural.
How do the two gradients stack?
Both areas set stackId="a". Mobile is first, on the baseline. Desktop is second, on top. Their colors come from config: mobile is var(--chart-2), desktop is var(--chart-1).
Related
- A simple area chartA single-series area chart with a smooth
- A stacked area chartAn area chart stacking desktop and mobile
- An interactive area chartA stacked area chart of three months of
- A line chartA line chart drawing one series as a
- An area chart with axesA stacked area chart with a Y axis
- A radial chart with a custom shapeA radial bar chart with one partial ring