Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Area Chart

One series as a smooth filled curve across six months: the plainest way to show a single metric's trend in React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Reach for it when one number moves over time and the shape matters more than each value: visitors, revenue, signups. With two series, the stacked or gradient versions read better. When people compare exact months, a bar chart is easier.

The curve passes through six monthly values with a 40% fill under a solid edge. The month axis keeps only its labels, cut to three letters, and the value axis only its grid lines, so the shape carries the chart.

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

Customize

  • <AreaChart data={chartData}> holds the rows, <XAxis dataKey="month"> the categories and <Area dataKey="desktop"> the series.
  • type="natural" on <Area> smooths the curve. linear draws straight segments and step holds each value.
  • fill and stroke read var(--color-desktop), which ChartContainer sets from chartConfig; fillOpacity={0.4} keeps the grid visible.
  • <CartesianGrid vertical={false} /> draws the horizontal guides. <XAxis> hides its line and ticks and cuts each month to three letters with tickFormatter.
  • ChartContainer is aspect-video by default. For a fixed height, give it aspect-auto h-[250px] through className.

FAQ

How do I change the area's color?

Change color in chartConfig.desktop, to another --chart-N token or any CSS color. The area's fill and the line on its edge both paint with var(--color-desktop), so both follow. For a different color in dark mode, give the entry theme: { light, dark } instead.

How do I change the curve?

Set type on <Area>: natural here, linear for straight segments, monotone for a curve that never overshoots a point, step to hold each value until the next one.

How do I plot my own data?

Replace chartData, then set dataKey on <XAxis> to your category field and on <Area> to your value field. Rename the desktop entry in chartConfig to the same key, or the tooltip shows no label.

How do I show the values on the side?

Add <YAxis axisLine={false} tickLine={false} tickMargin={8} tickCount={3} /> inside <AreaChart>, as the Area Chart with Axes does, and widen the left margin so the labels fit.

What does the tooltip show?

The hovered month and its value: <ChartTooltip content={<ChartTooltipContent indicator="line" />} />. cursor={false} hides the hover cursor; remove it to draw a vertical guide.

Can I read it with the keyboard?

Yes. accessibilityLayer on <AreaChart> makes the chart focusable: Tab into it, then the arrow keys move the tooltip from month to month.

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