Bar Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@bklitui/ui/charts"
4import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@/components/charts"
5 
6const data = [
7  { month: "Jan", revenue: 12000, profit: 4500 },
8  { month: "Feb", revenue: 15500, profit: 5200 },
9  { month: "Mar", revenue: 11000, profit: 3800 },
10  { month: "Apr", revenue: 18500, profit: 7100 },
11  { month: "May", revenue: 16800, profit: 5400 },
12  { month: "Jun", revenue: 21200, profit: 8800 },
13];
14 
15export default function Component() {
16  return (
17    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
18      <div className="w-full max-w-3xl">
19        <BarChart data={data} xDataKey="month">
20  <Grid horizontal />
21  <Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
22  <Bar dataKey="profit" fill="var(--chart-line-secondary)" lineCap="round" />
23  <BarXAxis />
24  <ChartTooltip />
25</BarChart>
26      </div>
27    </main>
28  )
29}