Bar Chart

Component 43

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,
  BarLineIndicator,
} 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 BarChartDemo9() {
  return (
    <div className="w-full">
      <BarChart data={chartData} xDataKey="month" barGap={0}>
        <LinearGradient
          from="var(--chart-3)"
          id="noGapGradient"
          to="transparent"
        />
        <Grid horizontal />
        <Bar
          dataKey="revenue"
          fill="url(#noGapGradient)"
          lineCap="butt"
          stroke="var(--chart-3)"
        />
        <BarXAxis />
        <ChartTooltip showCrosshair={false} showDots={false} />
        <BarLineIndicator data={chartData} valueKey="revenue" xKey="month" />
      </BarChart>
    </div>
  );
}