Area Chart

Visualize data over time with filled areas. Great for showing volume and trends.

Basic Area Chart

Traffic by Device

Monthly desktop visitors

Stacked Area Chart

Show multiple data series stacked on top of each other.

Device Mix

Desktop, mobile, and tablet split over time

Gradient Fill

Use gradients for a polished, modern look.

Desktop Traffic

With gradient fill effect

Step Area Chart

Use step interpolation for discrete data changes.

Mobile Traffic

Step-wise mobile traffic visualization

Usage

import { Area, AreaChart, XAxis, YAxis, CartesianGrid } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

const chartConfig = {
  desktop: { label: "Desktop", color: "oklch(var(--chart-1))" },
}

<ChartContainer config={chartConfig} className="min-h-[300px]">
  <AreaChart data={data}>
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area
      type="monotone"
      dataKey="desktop"
      fill="var(--color-desktop)"
      fillOpacity={0.3}
      stroke="var(--color-desktop)"
    />
  </AreaChart>
</ChartContainer>