Skip to Content
ComponentsArea

Area Chart

A line chart with a filled area beneath, useful for showing cumulative totals or volume over time.

"use client"
 
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
<ChartContainer config={chartConfig} className="h-64 w-full">
  <AreaChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area
      dataKey="desktop"
      fill="var(--color-desktop)"
      fillOpacity={0.2}
      stroke="var(--color-desktop)"
      strokeWidth={2}
    />
  </AreaChart>
</ChartContainer>

Examples

Stacked

<Area dataKey="desktop" stackId="1" ... />
<Area dataKey="mobile" stackId="1" ... />

Solid fill

<Area
  dataKey="desktop"
  fill="var(--color-desktop)"
  fillOpacity={1}
  stroke="var(--color-desktop)"
/>
Last updated on
LinePie