Bar Chart

Bars side by side or stacked, for comparing amounts across categories.

Revenue

January to June 2026

import { BarChart, BarChartSeries } from "@/components/ui/bar-chart";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartGrid,
  ChartLegend,
  ChartTooltip,
  ChartXAxis,
  ChartYAxis,
  type ChartConfig,
} from "@/components/ui/chart";

const data = [
  { month: "January", subscriptions: 4200, services: 1800 },
  { month: "February", subscriptions: 4650, services: 1500 },
  { month: "March", subscriptions: 5100, services: 2300 },
  { month: "April", subscriptions: 4980, services: 2100 },
  { month: "May", subscriptions: 5620, services: 2600 },
  { month: "June", subscriptions: 6040, services: 2450 },
];

const config = {
  subscriptions: { label: "Subscriptions" },
  services: { label: "Services" },
} satisfies ChartConfig;

export default function BarChartRevenue() {
  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Revenue</CardTitle>
        <CardDescription>January to June 2026</CardDescription>
      </CardHeader>
      <CardContent>
        <BarChart data={data} config={config} className="aspect-[4/3] sm:aspect-[2/1]">
          <ChartGrid />
          <ChartXAxis dataKey="month" tickFormatter={(month: string) => month.slice(0, 3)} />
          <ChartYAxis tickFormatter={(amount: number) => (amount ? `$${amount / 1000}k` : "$0")} />
          <ChartTooltip valueFormatter={(amount) => `$${amount.toLocaleString("en-US")}`} />
          <ChartLegend />
          <BarChartSeries dataKey="subscriptions" />
          <BarChartSeries dataKey="services" />
        </BarChart>
      </CardContent>
    </Card>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add bar-chart
pnpm dlx shadcn@latest add @jarvis/bar-chart

Usage

import { BarChart, BarChartSeries } from "@/components/ui/bar-chart";
import { ChartTooltip, ChartXAxis, type ChartConfig } from "@/components/ui/chart";

const data = [
  { month: "January", visitors: 186 },
  { month: "February", visitors: 305 },
  { month: "March", visitors: 237 },
];

const config = {
  visitors: { label: "Visitors" },
} satisfies ChartConfig;

export function VisitorsChart() {
  return (
    <BarChart data={data} config={config}>
      <ChartXAxis dataKey="month" />
      <ChartTooltip />
      <BarChartSeries dataKey="visitors" />
    </BarChart>
  );
}

BarChartSeries draws one series. The axes, tooltip, legend and config come from Chart.

Composition

BarChart

Examples

Stacked

stack="stacked" stacks the series in the order they're written. stack="expanded" stretches each stack to the same height to compare shares.

import { BarChart, BarChartSeries } from "@/components/ui/bar-chart";
import { ChartLegend, ChartTooltip, ChartXAxis, type ChartConfig } from "@/components/ui/chart";

const data = [
  { month: "January", subscriptions: 4200, services: 1800 },
  { month: "February", subscriptions: 4650, services: 1500 },
  { month: "March", subscriptions: 5100, services: 2300 },
  { month: "April", subscriptions: 4980, services: 2100 },
  { month: "May", subscriptions: 5620, services: 2600 },
  { month: "June", subscriptions: 6040, services: 2450 },
];

const config = {
  subscriptions: { label: "Subscriptions" },
  services: { label: "Services" },
} satisfies ChartConfig;

export default function BarChartStacked() {
  return (
    <BarChart data={data} config={config} stack="stacked" className="max-w-lg">
      <ChartXAxis dataKey="month" tickFormatter={(month: string) => month.slice(0, 3)} />
      <ChartTooltip valueFormatter={(amount) => `$${amount.toLocaleString("en-US")}`} />
      <ChartLegend />
      <BarChartSeries dataKey="subscriptions" />
      <BarChartSeries dataKey="services" />
    </BarChart>
  );
}

Horizontal

orientation="horizontal" puts the categories on the y-axis.

import { BarChart, BarChartSeries } from "@/components/ui/bar-chart";
import { ChartTooltip, ChartXAxis, ChartYAxis, type ChartConfig } from "@/components/ui/chart";

const data = [
  { page: "/", views: 12840 },
  { page: "/pricing", views: 7310 },
  { page: "/docs", views: 6120 },
  { page: "/blog", views: 3480 },
  { page: "/changelog", views: 1950 },
];

const config = {
  views: { label: "Views" },
} satisfies ChartConfig;

export default function BarChartHorizontal() {
  return (
    <BarChart data={data} config={config} orientation="horizontal" className="max-w-lg">
      <ChartXAxis type="number" hide />
      <ChartYAxis dataKey="page" type="category" />
      <ChartTooltip />
      <BarChartSeries dataKey="views" />
    </BarChart>
  );
}

Projected

A hatched series reads as an estimate, here stacked with the actual figures.

import { BarChart, BarChartSeries } from "@/components/ui/bar-chart";
import {
  ChartGrid,
  ChartLegend,
  ChartTooltip,
  ChartXAxis,
  type ChartConfig,
} from "@/components/ui/chart";

const data = [
  { quarter: "Q1", actual: 182 },
  { quarter: "Q2", actual: 214 },
  { quarter: "Q3", actual: 238 },
  { quarter: "Q4", projected: 266 },
];

const config = {
  actual: { label: "Actual" },
  projected: { label: "Projected", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function BarChartProjected() {
  return (
    <BarChart data={data} config={config} stack="stacked" className="max-w-lg">
      <ChartGrid />
      <ChartXAxis dataKey="quarter" />
      <ChartTooltip />
      <ChartLegend />
      <BarChartSeries dataKey="actual" />
      <BarChartSeries dataKey="projected" variant="hatched" />
    </BarChart>
  );
}

Props

Part	Extends
BarChart	Chart
BarChartSeries	Bar

BarChart

Prop	Type	Default
`config` Each series' label, icon and color, keyed by its data key.	`ChartConfig`	—
`data` The rows to plot, one object per category.	`Record<string, unknown>[]`	—
`orientation` Which way the bars run: up from the x-axis, or across from the y-axis. Horizontal bars take their categories on the y-axis, so give `ChartYAxis` the `dataKey` and `type="category"`.	`"horizontal" \| "vertical"`	`"vertical"`
`stack` How the series combine: side by side, stacked, or stacked and scaled to the same length, so each shows its share.	`"expanded" \| "none" \| "stacked"`	`"none"`
`children`	`React.ReactNode`	—

BarChartSeries

Prop	Type	Default
`dataKey` The key of the series' values in each row, which also names it in the config.	`string`	—
`variant` How the bars are filled. Hatched bars suit estimates and forecasts.	`"hatched" \| "solid"`	`"solid"`
`radius` The radius of the bars' outer corners, or of every corner when they're stacked.	`number`	`2`

BarChartSeries takes the props of Recharts' Bar too, such as maxBarSize.