BarChart

A responsive bar chart component built on Recharts for comparing data across categories with multiple visualization options.

Install Dependencies

npx quickcode-ui add BarChart

pnpm dlx quickcode-ui add BarChart

yarn dlx quickcode-ui add BarChart

bunx quickcode-ui add BarChart

Examples

Basic

Basic Bar Chart

Horizontal

Horizontal Bar Chart

Multiple

Multiple Bar Chart

Stacked + Legend

Stacked Bar Chart with Legend

Desktop

Mobile

import { 
  BarChart, 
  Bar, 
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  CartesianGrid,
  XAxis,
  YAxis,
  Legend,
  type ChartConfig 
} from '@/components/ui/BarChart'
import { Monitor, Smartphone } from 'lucide-react'

const data = [
  {
    "month": "Jan",
    "desktop": 186,
    "mobile": 80
  },
  {
    "month": "Feb",
    "desktop": 305,
    "mobile": 200
  },
  {
    "month": "Mar",
    "desktop": 237,
    "mobile": 120
  },
  {
    "month": "Apr",
    "desktop": 173,
    "mobile": 190
  },
  {
    "month": "May",
    "desktop": 209,
    "mobile": 130
  },
  {
    "month": "Jun",
    "desktop": 214,
    "mobile": 140
  }
]

const config: ChartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
}

const CustomLegend = () => {
  return (
    <div className="flex justify-center gap-6 mt-4">
      <div className="flex items-center gap-2">
        <Monitor className="w-4 h-4" style={{ color: 'var(--chart-1)' }} />
        <span className="text-sm text-muted-foreground">Desktop</span>
      </div>
      <div className="flex items-center gap-2">
        <Smartphone className="w-4 h-4" style={{ color: 'var(--chart-2)' }} />
        <span className="text-sm text-muted-foreground">Mobile</span>
      </div>
    </div>
  )
}

export function StackedBarChart() {
  return (
    <div className="w-full">
      <ChartContainer config={config} className="h-[300px]">
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
          <XAxis dataKey="month" stroke="var(--muted-foreground)" />
          <YAxis stroke="var(--muted-foreground)" />
          <ChartTooltip content={ChartTooltipContent} />
          <Bar dataKey="desktop" stackId="a" fill="var(--color-desktop)" radius={[0, 0, 4, 4]} />
          <Bar dataKey="mobile" stackId="a" fill="var(--color-mobile)" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ChartContainer>
      <CustomLegend />
    </div>
  )
}

Label

Bar Chart with Labels

Custom Label

Bar Chart with Custom Labels

Mixed

Mixed Bar Chart

Active

Active Bar Chart

Negative

Negative Bar Chart

Props

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	—	Configuration object defining chart colors and labels
`children`	`ReactElement`	—	Chart components to render
`className`	`string`	—	Additional CSS classes

BarChart

Prop	Type	Default	Description
`data`	`any[]`	—	Array of data objects to visualize
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	Chart orientation
`margin`	`object`	—	Chart margins configuration
`className`	`string`	—	Additional CSS classes

Bar

Prop	Type	Default	Description
`dataKey`	`string`	—	Key from data array to plot
`stackId`	`string`	—	ID for stacking bars together
`fill`	`string`	—	Bar fill color
`radius`	`number \| number[]`	—	Bar corner radius
`className`	`string`	—	Additional CSS classes