Bar Chart

Component 4

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,
  LinearGradient,
} from "@/components/ui/bar-chart";

const chartData = [
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 3800 },
  { month: "Mar", revenue: 5100 },
  { month: "Apr", revenue: 4600 },
  { month: "May", revenue: 5400 },
  { month: "Jun", revenue: 6200 },
  { month: "Jul", revenue: 5800 },
  { month: "Aug", revenue: 6800 },
  { month: "Sep", revenue: 6100 },
  { month: "Oct", revenue: 7200 },
  { month: "Nov", revenue: 6900 },
  { month: "Dec", revenue: 7800 },
];

export default function BarChartDemo7() {
  return (
    <div className="w-full">
      <BarChart data={chartData} xDataKey="month">
        <LinearGradient
          from="hsl(217, 91%, 60%)"
          id="barGradient"
          to="hsl(280, 87%, 65%)"
        />
        <Grid horizontal />
        <Bar
          dataKey="revenue"
          fill="url(#barGradient)"
          lineCap={4}
          stroke="hsl(217, 91%, 60%)"
        />
        <BarXAxis />
        <ChartTooltip />
      </BarChart>
    </div>
  );
}