Bar Chart

"use client"
 
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "Jan", desktop: 186, mobile: 80 },
  { month: "Feb", desktop: 305, mobile: 200 },
]
 
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
}
 
<ChartContainer config={chartConfig} className="h-64 w-full">
  <BarChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

<BarChart data={chartData} layout="vertical">
  <CartesianGrid horizontal={false} />
  <YAxis dataKey="month" type="category" />
  <XAxis type="number" hide />
  <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
</BarChart>

<Bar dataKey="desktop" stackId="a" radius={[0, 0, 4, 4]} />
<Bar dataKey="mobile" stackId="a" radius={[4, 4, 0, 0]} />

npx shadcn@latest add https://solar-ui.com/r/chart-bar.json

npm install recharts

type ChartConfig = {
  [key: string]: {
    label?: string
    color?: string       // CSS variable or hex
    theme?: { light: string; dark: string }
  }
}