Components
Loading preview...
Here is Bar Chart component
npx shadcn@latest add https://21st.dev/r/bklitai/bar-chart"use client";
import {
BarChart,
Bar,
BarYAxis,
Grid,
ChartTooltip,
} from "@/components/ui/bar-chart";
const chartData = [
{ browser: "Chrome", users: 275 },
{ browser: "Safari", users: 200 },
{ browser: "Firefox", users: 187 },
{ browser: "Edge", users: 173 },
{ browser: "Other", users: 90 },
];
export default function BarChartDemo5() {
return (
<div className="w-full">
<BarChart
data={chartData}
xDataKey="browser"
orientation="horizontal"
margin={{ left: 80 }}
aspectRatio="4 / 3"
>
<Grid horizontal={false} vertical fadeVertical />
<Bar dataKey="users" lineCap={4} />
<BarYAxis />
<ChartTooltip showCrosshair={false} />
</BarChart>
</div>
);
}