Grouped Bar Chart

Multiple bar chart component with side-by-side data comparison. Built for React applications requiring dual data series visualization with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A multiple bar chart"const chartData = [  { month: "January", desktop: 186, mobile: 80 },  { month: "February", desktop: 305, mobile: 200 },  { month: "March", desktop: 237, mobile: 120 },  { month: "April", desktop: 73, mobile: 190 },  { month: "May", desktop: 209, mobile: 130 },  { month: "June", desktop: 214, mobile: 140 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",  },} satisfies ChartConfigexport function ChartBarMultiple() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col gap-1 pb-4 mb-4 border-b">        <h3 className="text-lg font-semibold">Bar Chart - Multiple</h3>        <p className="text-sm text-muted-foreground">January - June 2024</p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer config={chartConfig} className="h-[250px] w-full">          <BarChart accessibilityLayer data={chartData}>            <CartesianGrid vertical={false} />            <XAxis              dataKey="month"              tickLine={false}              tickMargin={10}              axisLine={false}              tickFormatter={(value) => value.slice(0, 3)}            />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent indicator="dashed" />}            />            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />          </BarChart>        </ChartContainer>      </div>      <div className="flex flex-col items-start gap-2 text-sm pt-4 border-t">        <div className="flex gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-04.json

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-04.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/bar-chart-04.json

bunx shadcn@latest add https://www.shadcn.io/registry/bar-chart-04.json

Features

Multiple data series displaying desktop and mobile data side-by-side
Dashed tooltip indicator providing clear visual distinction between series
Dual color scheme using distinct colors for each data category
Side-by-side bars enabling direct comparison between data points
TypeScript support with complete type definitions for multi-series charts
shadcn/ui integration using Chart components with multiple series styling

Use Cases

This free open source React component works well for:

Comparative analysis - Applications requiring side-by-side data comparison built with Next.js
Performance metrics - Dual metrics visualization using TypeScript and Tailwind CSS
User engagement - Desktop vs mobile analytics with clear visual separation
Business intelligence - Multi-category data analysis with grouped presentation

API Reference

ChartBarMultiple

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the card container

Multi-Series Configuration

Dual data series with distinct styling:

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

Enhanced tooltip with dashed indicator for multi-series data:

<ChartTooltip
  cursor={false}
  content={<ChartTooltipContent indicator="dashed" />}
/>

Multiple Bar Elements

Two Bar components for side-by-side display:

<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />

Implementation Notes

Two Bar components create grouped side-by-side visualization
Dashed tooltip indicator distinguishes between data series
Each series uses distinct colors from the chart configuration
Bars feature 4px radius for subtle rounded corners
CartesianGrid excludes vertical lines for cleaner comparison
Perfect for applications requiring direct comparison between two data categories