Bar Chart

Dashboards

About

An accessible bar chart built on Recharts for comparing magnitude across categories, with grouped, stacked, or horizontal layouts and a one-click chart/table toggle.

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

Code

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

Usage.tsx

"use client";

import BarChart from "@/components/ui/bar-chart";
import { ThemeProvider } from "@/components/ui/bar-chart-utils/ThemeContext";
import { compactCurrency } from "@/components/ui/bar-chart-utils/chartTheme";

/** Monthly recurring revenue by plan, twelve months. */
const MRR_BY_PLAN = [
  "Oct",
  "Nov",
  "Dec",
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
].map((month, i) => ({
  month,
  starter: Math.round(18_000 + i * 900 + Math.sin(i / 2) * 1_800),
  pro: Math.round(42_000 + i * 2_600 + Math.cos(i / 3) * 3_200),
  enterprise: Math.round(61_000 + i * 4_100 + (i > 6 ? 9_000 : 0)),
}));

const PLAN_SERIES = [
  { key: "starter", label: "Starter", slot: 0 },
  { key: "pro", label: "Pro", slot: 1 },
  { key: "enterprise", label: "Enterprise", slot: 2 },
];

export default function BarChartDemo() {
  return (
    <ThemeProvider>
      <div className="w-full max-w-2xl bg-background p-6">
        <BarChart
          title="MRR by plan"
          data={MRR_BY_PLAN}
          x="month"
          series={PLAN_SERIES}
          format={compactCurrency}
        />
      </div>
    </ThemeProvider>
  );
}