Grouped Bar Chart

Dashboards 1

About

A canvas-rendered bar chart that compares multiple series across categories, switching between grouped, stacked and 100% stacked layouts with hover tooltips, keyboard navigation and a toggleable legend.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grouped Bar Chart to your project and fits it to your theme.

Code

How Grouped Bar Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GroupedBarChart } from "@/components/ui/grouped-bar-chart";

const categories = [
  { id: "q1", label: "Q1" },
  { id: "q2", label: "Q2" },
  { id: "q3", label: "Q3" },
  { id: "q4", label: "Q4" },
];

const series = [
  { id: "revenue", label: "Revenue", values: [42000, 51000, 47000, 61000] },
  { id: "expenses", label: "Expenses", values: [31000, 36000, 34000, 39000] },
];

export default function GroupedBarChartDemo() {
  return (
    <div className="w-full max-w-2xl p-6">
      <GroupedBarChart
        categories={categories}
        series={series}
        ariaLabel="Quarterly revenue vs expenses"
      />
    </div>
  );
}