Area Chart

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

Basic Area Chart

Energy Production

Monthly solar energy production in kWh

Stacked Area Chart

Show multiple data series stacked on top of each other.

Energy Mix

Solar, grid, and battery contribution over time

Gradient Fill

Use gradients for a polished, modern look.

Solar Production

With gradient fill effect

Step Area Chart

Use step interpolation for discrete data changes.

Grid Import

Step-wise grid import visualization

Usage

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

const chartConfig = {
  solar: { label: "Solar", color: "hsl(142, 76%, 36%)" },
}

<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="solar"
      fill="var(--color-solar)"
      fillOpacity={0.3}
      stroke="var(--color-solar)"
    />
  </AreaChart>
</ChartContainer>