Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Area Chart with Axes

Stacked areas with a value axis on the side and months along the bottom, so readers get numbers without hovering. Two series in React.

Framework
Charting library

Preview

Preview width

About

Use it when people read numbers off the chart: a report, a shared screen, a printout where nothing can be hovered. The other area charts drop the value axis to keep the card quiet; this one shows three labeled values. If people need every exact number, add a table under it.

Mobile and desktop stack as smooth curves at 40% fill. On the left, the value axis prints 0, 300 and 600 with no line or tick marks, and the months run along the bottom, cut to three letters.

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

Customize

  • <YAxis axisLine={false} tickLine={false} tickMargin={8} tickCount={3} /> adds the value axis with three labels.
  • The chart's margin sets left: -20 to pull the labels into the card's padding.
  • A tickFormatter on <YAxis> would format each value; <XAxis> uses one to cut the months to three letters.
  • Both <Area>s share stackId="a", so the axis measures the stacked total.

FAQ

How do I change how many values the axis shows?

Set tickCount on <YAxis>: 3 here. Recharts rounds to tidy values; pass ticks={[0, 300, 600]} for exact ones.

How do I format the values as currency or thousands?

Pass tickFormatter to <YAxis>. It receives each value and returns the label, for example through Intl.NumberFormat with notation: "compact" for 1.2K.

Why does the axis stop at 600?

Recharts takes the domain from the stacked data and rounds it for three ticks. Set domain={[0, 600]} on <YAxis> to fix it.

Can the axis go on the right?

Set orientation="right" on <YAxis> and move the negative margin to right so the labels sit in the card's padding.

How do I bring back the axis line and tick marks?

Remove axisLine={false} and tickLine={false} from <YAxis>, and from <XAxis> for the months.

Why are the value labels cut off?

The chart's margin has left: -20, which pulls the axis into the card's padding. Longer labels need room: raise it to 0 or give <YAxis> a width.

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