Bar Chart

Dashboards 1

About

A vertical or horizontal bar chart built on Recharts for visualizing categorical data with support for multiple series, stacking, custom colors, and tooltips.

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";

const data = [
  { name: "Jan", orders: 12 },
  { name: "Feb", orders: 32 },
  { name: "Mar", orders: 19 },
  { name: "Apr", orders: 35 },
  { name: "May", orders: 40 },
  { name: "Jun", orders: 25 },
];

export default function BarChartStyleDefault() {
  return <BarChart data={data} index="name" categories={["orders"]} />;
}