Bar Chart

Cards 16

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 { Card } from "@/components/ui/card"
import { Chart, type ChartConfig, ChartTooltip, ChartTooltipContent } from "@/components/ui/bar-chart"
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"

const projectData = [
  { team: "Engineering", completed: 42, ongoing: 15 },
  { team: "Design", completed: 30, ongoing: 5 },
  { team: "Marketing", completed: 25, ongoing: 10 },
  { team: "Sales", completed: 20, ongoing: 8 },
  { team: "Support", completed: 35, ongoing: 12 },
  { team: "Engineering", completed: 42, ongoing: 15 },
  { team: "Design", completed: 30, ongoing: 5 },
  { team: "Marketing", completed: 25, ongoing: 10 },
  { team: "Sales", completed: 20, ongoing: 8 },
  { team: "Support", completed: 35, ongoing: 12 },
  { team: "Engineering", completed: 42, ongoing: 15 },
  { team: "Design", completed: 30, ongoing: 5 },
]

const chartConfig = {
  completed: {
    label: "Completed",
    color: "var(--chart-1)",
  },
  ongoing: {
    label: "Ongoing",
    color: "var(--chart-2)",
  },
  label: {
    color: "var(--bg)",
  },
} satisfies ChartConfig

export default function Component() {
  return (
    <Card>
      <Card.Header
        title="Team Project Status"
        description="Completed vs Ongoing Projects by Team"
      />
      <Card.Content>
        <Chart config={chartConfig}>
          <BarChart
            accessibilityLayer
            data={projectData}
            layout="vertical"
            margin={{
              right: 16,
            }}
          >
            <CartesianGrid horizontal={false} />
            <YAxis
              dataKey="team"
              type="category"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
            />
            <XAxis dataKey="completed" type="number" hide />
            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
            <Bar dataKey="completed" layout="vertical" fill="var(--color-completed)" radius={4}>
              <LabelList
                dataKey="team"
                position="insideLeft"
                offset={8}
                className="fill-(--color-label)"
                fontSize={12}
              />
              <LabelList
                dataKey="completed"
                position="right"
                offset={8}
                className="fill-fg"
                fontSize={12}
              />
            </Bar>
          </BarChart>
        </Chart>
      </Card.Content>
    </Card>
  )
}