Bar Chart

Component 7

About

Here is Bar Chart component

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,
  Bar,
  BarXAxis,
  Grid,
  ChartTooltip,
} from "@/components/ui/bar-chart";

const chartData = [
  { month: "Jan", desktop: 4000, mobile: 2400 },
  { month: "Feb", desktop: 5000, mobile: 3000 },
  { month: "Mar", desktop: 3500, mobile: 2800 },
  { month: "Apr", desktop: 4200, mobile: 3200 },
  { month: "May", desktop: 3800, mobile: 2600 },
  { month: "Jun", desktop: 5500, mobile: 3800 },
];

export default function BarChartDemo4() {
  return (
    <div className="w-full">
      <BarChart data={chartData} xDataKey="month" stacked stackGap={3}>
        <Grid horizontal />
        <Bar
          dataKey="desktop"
          fill="var(--chart-1)"
          lineCap="butt"
          stackGap={3}
        />
        <Bar
          dataKey="mobile"
          fill="var(--chart-3)"
          lineCap="butt"
          stackGap={3}
        />
        <BarXAxis />
        <ChartTooltip />
      </BarChart>
    </div>
  );
}