Area chart - Mzizi

Area charts display quantitative data over a continuous interval, with the area between the axis and the line filled. They are ideal for showing trends over time.

Basic area chart

const data = [
  { month: "Jan", visitors: 1200 },
  { month: "Feb", visitors: 1900 },
  { month: "Mar", visitors: 2400 },
  { month: "Apr", visitors: 2100 },
  { month: "May", visitors: 2800 },
  { month: "Jun", visitors: 3200 },
]

const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <AreaChart data={data}>
    <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
    <XAxis dataKey="month" className="text-xs fill-muted-foreground" />
    <YAxis className="text-xs fill-muted-foreground" />
    <Area
      type="monotone"
      dataKey="visitors"
      fill="var(--chart-1)"
      fillOpacity={0.2}
      stroke="var(--chart-1)"
      strokeWidth={2}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </AreaChart>
</ChartContainer>

Stacked area chart

For comparing multiple data series:

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

<AreaChart data={data}>
  <Area
    type="monotone"
    dataKey="mobile"
    stackId="1"
    fill="var(--chart-1)"
    fillOpacity={0.3}
    stroke="var(--chart-1)"
  />
  <Area
    type="monotone"
    dataKey="desktop"
    stackId="1"
    fill="var(--chart-2)"
    fillOpacity={0.3}
    stroke="var(--chart-2)"
  />
</AreaChart>

Gradient fill

For a polished look, use a gradient fill:

<defs>
  <linearGradient id="fillVisitors" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%" stopColor="var(--chart-1)" stopOpacity={0.3} />
    <stop offset="95%" stopColor="var(--chart-1)" stopOpacity={0.05} />
  </linearGradient>
</defs>
<Area
  type="monotone"
  dataKey="visitors"
  fill="url(#fillVisitors)"
  stroke="var(--chart-1)"
  strokeWidth={2}
/>

Styling guidelines

Use fillOpacity={0.2} for single-series charts
Use fillOpacity={0.3} for stacked charts (so overlapping areas are visible)
Use type="monotone" for smooth curves, type="linear" for straight segments
Set strokeWidth={2} for the line stroke
Use CartesianGrid with strokeDasharray="3 3" and className="stroke-border" for grid lines
Use className="text-xs fill-muted-foreground" on axis components for themed labels

Responsive sizing

Wrap in ChartContainer with a height class:

<ChartContainer config={chartConfig} className="h-[200px] sm:h-[300px] lg:h-[400px]">
  <AreaChart data={data}>...</AreaChart>
</ChartContainer>

The ChartContainer uses ResponsiveContainer internally, so the chart fills the available width automatically.