Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

An area chart with axes for React

Desktop and mobile stacked, with a value axis on the left showing three ticks and short month names along the bottom.

Desktop and mobile stacked as smooth areas, with a value axis on the left showing three ticks. Month names along the bottom are shortened.

Use a value axis when people should read a magnitude off the chart, not only from the tooltip. Skip it when the shape is enough. For exact rows, use a Table. In React, Base UI does not choose three ticks. You add the axis, and you pass the rows.

Preview

Preview width

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

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

Usage

<div className="w-full max-w-xl rounded-md border bg-background p-4">
  <ChartContainer config={chartConfig}>
    <AreaChart
      accessibilityLayer
      data={chartData}
      margin={{
        left: -20,
        right: 12,
      }}
    >
      <CartesianGrid vertical={false} />
      <XAxis
        axisLine={false}
        dataKey="month"
        tickFormatter={formatMonth}
        tickLine={false}
        tickMargin={8}
      />
      <YAxis axisLine={false} tickCount={3} tickLine={false} tickMargin={8} />
      <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
      <Area
        dataKey="mobile"
        fill="var(--color-mobile)"
        fillOpacity={0.4}
        stackId="a"
        stroke="var(--color-mobile)"
        type="natural"
      />
      <Area
        dataKey="desktop"
        fill="var(--color-desktop)"
{/* The rest of the file is under Installation. */}

FAQ

How many numbers does the Y axis show?

YAxis sets tickCount={3}, so Recharts aims for three ticks. axisLine and tickLine are false, and tickMargin is 8. This file doesn't set tickFormatter on YAxis, so the ticks are the raw scale numbers.

Why is the left margin negative?

AreaChart sets margin to left: -20 and right: 12. The negative left margin pulls the plot toward the frame so the YAxis labels sit in that gutter. The right margin is 12, matching the other edge's padding on the X ticks.

How do desktop and mobile stack?

Both Area components set stackId="a". Mobile is first, on the baseline. Desktop is second, on top of it. Both use type="natural" and fillOpacity={0.4}, with fill and stroke of var(--color-mobile) and var(--color-desktop).

How are the month ticks shortened?

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which returns value.slice(0, 3). axisLine and tickLine are false, and tickMargin is 8. CartesianGrid sets vertical={false}, so the grid lines run across the Y scale.

What does the tooltip show?

ChartTooltip renders ChartTooltipContent with no extra props, so indicator stays dot, and sets cursor={false}. The title is the month. The rows are Mobile and Desktop from config.

Can I reach a point from the keyboard?

Yes. AreaChart sets accessibilityLayer. The month tick, the Y numbers, and the labels in config name the point. ChartContainer keeps the default 16:9 box inside a w-full max-w-xl frame.

API Reference

Chart

Sets config={chartConfig}. The rest is on the Chart page.

All 70 chart examples