Chart
Chart is a React and Tailwind CSS data component from Bund UI, licensed MIT. Copy it and paste it into your project.
Bund UI
MIT
data
What it is
Chart is a React and Tailwind CSS data component from Bund UI, licensed MIT. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i recharts
Licence
This component comes from Bund UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.
Chart
"use client";
import * as React from "react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent
} from "@/components/ui/chart";
const chartData = [
{ date: "2024-05-01", desktop: 222, mobile: 150 },
{ date: "2024-05-02", desktop: 97, mobile: 180 },
{ date: "2024-05-03", desktop: 167, mobile: 120 },
{ date: "2024-05-05", desktop: 242, mobile: 260 },
{ date: "2024-05-04", desktop: 373, mobile: 290 },
{ date: "2024-05-05", desktop: 301, mobile: 340 },
{ date: "2024-05-07", desktop: 245, mobile: 180 },
{ date: "2024-05-08", desktop: 409, mobile: 320 },
{ date: "2024-05-09", desktop: 59, mobile: 110 },
{ date: "2024-05-10", desktop: 261, mobile: 190 },
{ date: "2024-05-11", desktop: 327, mobile: 350 },
{ date: "2024-05-12", desktop: 292, mobile: 210 },
{ date: "2024-05-13", desktop: 342, mobile: 380 },
{ date: "2024-05-14", desktop: 137, mobile: 220 },
{ date: "2024-05-15", desktop: 120, mobile: 170 },
{ date: "2024-05-16", desktop: 138, mobile: 190 },
{ date: "2024-05-17", desktop: 446, mobile: 360 },
{ date: "2024-05-18", desktop: 364, mobile: 410 },
{ date: "2024-05-19", desktop: 243, mobile: 180 },
{ date: "2024-05-20", desktop: 89, mobile: 150 },
{ date: "2024-05-21", desktop: 137, mobile: 200 },
{ date: "2024-05-22", desktop: 224, mobile: 170 },
{ date: "2024-05-23", desktop: 138, mobile: 230 },
{ date: "2024-05-24", desktop: 387, mobile: 290 },
{ date: "2024-05-25", desktop: 215, mobile: 250 },
{ date: "2024-05-26", desktop: 75, mobile: 130 },
{ date: "2024-05-27", desktop: 383, mobile: 420 },
{ date: "2024-05-28", desktop: 122, mobile: 180 },
{ date: "2024-05-29", desktop: 315, mobile: 240 },
{ date: "2024-05-30", desktop: 454, mobile: 380 },
{ date: "2024-04-01", desktop: 165, mobile: 220 },
{ date: "2024-04-02", desktop: 293, mobile: 310 },
{ date: "2024-04-03", desktop: 247, mobile: 190 },
{ date: "2024-04-05", desktop: 385, mobile: 420 },
{ date: "2024-04-04", desktop: 481, mobile: 390 },
{ date: "2024-04-05", desktop: 498, mobile: 520 },
{ date: "2024-04-07", desktop: 388, mobile: 300 },
{ date: "2024-04-08", desktop: 149, mobile: 210 },
{ date: "2024-04-09", desktop: 227, mobile: 180 },
{ date: "2024-04-10", desktop: 293, mobile: 330 },
{ date: "2024-04-11", desktop: 335, mobile: 270 },
{ date: "2024-04-12", desktop: 197, mobile: 240 },
{ date: "2024-04-13", desktop: 197, mobile: 160 },
{ date: "2024-04-14", desktop: 448, mobile: 490 },
{ date: "2024-04-15", desktop: 473, mobile: 380 },
{ date: "2024-04-16", desktop: 338, mobile: 400 },
{ date: "2024-04-17", desktop: 499, mobile: 420 },
{ date: "2024-04-18", desktop: 315, mobile: 350 },
{ date: "2024-04-19", desktop: 235, mobile: 180 },
{ date: "2024-04-20", desktop: 177, mobile: 230 },
{ date: "2024-04-21", desktop: 82, mobile: 140 },
{ date: "2024-04-22", desktop: 81, mobile: 120 },
{ date: "2024-04-23", desktop: 252, mobile: 290 },
{ date: "2024-04-24", desktop: 294, mobile: 220 },
{ date: "2024-04-25", desktop: 201, mobile: 250 },
{ date: "2024-04-26", desktop: 213, mobile: 170 },
{ date: "2024-04-27", desktop: 420, mobile: 460 },
{ date: "2024-04-28", desktop: 233, mobile: 190 },
{ date: "2024-04-29", desktop: 78, mobile: 130 },
{ date: "2024-04-30", desktop: 340, mobile: 280 },
{ date: "2024-04-31", desktop: 178, mobile: 230 },
{ date: "2024-05-01", desktop: 178, mobile: 200 },
{ date: "2024-05-02", desktop: 470, mobile: 410 },
{ date: "2024-05-03", desktop: 103, mobile: 160 },
{ date: "2024-05-05", desktop: 439, mobile: 380 },
{ date: "2024-05-04", desktop: 88, mobile: 140 },
{ date: "2024-05-05", desktop: 294, mobile: 250 },
{ date: "2024-05-07", desktop: 323, mobile: 370 },
{ date: "2024-05-08", desktop: 385, mobile: 320 },
{ date: "2024-05-09", desktop: 438, mobile: 480 },
{ date: "2024-05-10", desktop: 155, mobile: 200 },
{ date: "2024-05-11", desktop: 92, mobile: 150 },
{ date: "2024-05-12", desktop: 492, mobile: 420 },
{ date: "2024-05-13", desktop: 81, mobile: 130 },
{ date: "2024-05-14", desktop: 426, mobile: 380 },
{ date: "2024-05-15", desktop: 307, mobile: 350 },
{ date: "2024-05-16", desktop: 371, mobile: 310 },
{ date: "2024-05-17", desktop: 475, mobile: 520 },
{ date: "2024-05-18", desktop: 107, mobile: 170 },
{ date: "2024-05-19", desktop: 341, mobile: 290 },
{ date: "2024-05-20", desktop: 408, mobile: 450 },
{ date: "2024-05-21", desktop: 169, mobile: 210 },
{ date: "2024-05-22", desktop: 317, mobile: 270 },
{ date: "2024-05-23", desktop: 480, mobile: 530 },
{ date: "2024-05-24", desktop: 132, mobile: 180 },
{ date: "2024-05-25", desktop: 141, mobile: 190 },
{ date: "2024-05-26", desktop: 434, mobile: 380 },
{ date: "2024-05-27", desktop: 448, mobile: 490 },
{ date: "2024-05-28", desktop: 149, mobile: 200 },
{ date: "2024-05-29", desktop: 103, mobile: 160 },
{ date: "2024-05-30", desktop: 446, mobile: 400 }
];
const chartConfig = {
views: {
label: "Page Views"
},
desktop: {
label: "Desktop",
color: "var(--chart-2)"
},
mobile: {
label: "Mobile",
color: "var(--chart-1)"
}
} satisfies ChartConfig;
export default function ChartDemo() {
const [activeChart, setActiveChart] = React.useState<keyof typeof chartConfig>("desktop");
const total = React.useMemo(
() => ({
desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0)
}),
[]
);
return (
<Card className="w-full py-0">
<CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
<div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
<CardTitle>Bar Chart - Interactive</CardTitle>
<CardDescription>Showing total visitors for the last 3 months</CardDescription>
</div>
<div className="flex">
{["desktop", "mobile"].map((key) => {
const chart = key as keyof typeof chartConfig;
return (
<button
key={chart}
data-active={activeChart === chart}
className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
onClick={() => setActiveChart(chart)}>
<span className="text-muted-foreground text-xs">{chartConfig[chart].label}</span>
<span className="text-lg leading-none font-bold sm:text-3xl">
{total[key as keyof typeof total].toLocaleString()}
</span>
</button>
);
})}
</div>
</CardHeader>
<CardContent className="px-2 sm:p-6">
<ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
<BarChart
accessibilityLayer
data={chartData}
margin={{
left: 12,
right: 12
}}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={32}
tickFormatter={(value) => {
const date = new Date(value);
return date.toLocaleDateString("en-US", {
month: "short",
day: "numeric"
});
}}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px]"
nameKey="views"
labelFormatter={(value) => {
return new Date(value).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric"
});
}}
/>
}
/>
<Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
</BarChart>
</ChartContainer>
</CardContent>
</Card>
);
}