Bar Chart

Compare values across categories with vertical or horizontal bars.

Basic Bar Chart

Monthly Solar Production

Energy generated in kWh per month

Grouped Bar Chart

Compare multiple data series side by side.

Solar vs Grid

Monthly comparison of energy sources

Stacked Bar Chart

Stack bars to show total and composition.

Total Energy Mix

Stacked view of solar and grid import

Horizontal Bar Chart

Use horizontal bars for categories with long labels.

Energy by Source

Total energy contribution by source type

With Negative Values

Display both positive and negative values (e.g., energy import/export).

Net Energy Flow

Positive = export, Negative = import

Usage

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

<ChartContainer config={chartConfig} className="min-h-[300px]">
  <BarChart data={data}>
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="solar" fill="var(--color-solar)" radius={[4, 4, 0, 0]} />
  </BarChart>
</ChartContainer>

{/* Stacked bars */}
<Bar dataKey="grid" stackId="a" fill="var(--color-grid)" />
<Bar dataKey="solar" stackId="a" fill="var(--color-solar)" />

{/* Horizontal layout */}
<BarChart data={data} layout="vertical">
  <XAxis type="number" />
  <YAxis dataKey="category" type="category" />
</BarChart>