Bar Chart

Compare values across categories with vertical or horizontal bars.

Basic Bar Chart

Monthly Desktop Production

Monthly desktop visitors

Grouped Bar Chart

Compare multiple data series side by side.

Desktop vs Grid

Monthly comparison of traffic sources

Stacked Bar Chart

Stack bars to show total and composition.

Total Device Mix

Stacked view of desktop and mobile

Horizontal Bar Chart

Use horizontal bars for categories with long labels.

Traffic by Source

Total traffic contribution by source type

With Negative Values

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

Net Traffic 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="desktop" fill="var(--color-desktop)" radius={[4, 4, 0, 0]} />
  </BarChart>
</ChartContainer>

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

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