Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Gradient Area Chart

Two stacked areas filled with vertical gradients that fade toward the baseline, keeping the edges strong and the plot light. For React.

Framework
Charting library

Preview

Preview width

About

Pick it for a dashboard's headline chart, where a flat tint feels heavy but the series should still read as shapes. It's the stacked area with a different paint: the data and the reading are the same. At small sizes or over dense grid lines, a flat fill stays clearer.

Each band fades from strong near its top to faint near the bottom, in its own color, under a solid edge. Mobile stacks under desktop, and the tooltip lists both with dots.

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

Customize

  • <defs> inside <AreaChart> holds two <linearGradient>s, fillDesktop and fillMobile, from stopOpacity={0.8} at 5% to 0.1 at 95%.
  • Each <Area> sets fill="url(#fillDesktop)" (or fillMobile) and keeps stroke="var(--color-desktop)".
  • The stops' stopColor reads var(--color-<key>), so the gradient follows chartConfig and dark mode.
  • Gradient ids live in the page's DOM: rename them when two of these charts render together.

FAQ

How is the fade made?

With SVG: a <linearGradient> in <defs> with two <stop>s, and fill="url(#fillDesktop)" on the <Area>.

How do I fade all the way to transparent?

Set stopOpacity={0} on the 95% stop. The <Area> also has fillOpacity={0.4}, which multiplies with the stops; remove it to use their full range.

Do two gradient charts on one page clash?

They can. fillDesktop is an id in the page's DOM, so a second chart with the same ids may paint from the first chart's gradients. Give each chart its own ids, for example with useId().

Can the gradient run left to right?

Set x1="0" y1="0" x2="1" y2="0" on the <linearGradient>. A sideways fade reads as a change over time, so use it with care.

Does the gradient follow dark mode?

Yes. The stops use var(--color-desktop) and var(--color-mobile), which come from --chart-1 and --chart-2. When the theme switches, the gradients switch with 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