chart-bar-stacked

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
5 
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartLegend,
18  ChartLegendContent,
19  ChartTooltip,
20  ChartTooltipContent,
21} from "@/registry/new-york/ui/chart"
22const chartData = [
23  { month: "January", desktop: 186, mobile: 80 },
24  { month: "February", desktop: 305, mobile: 200 },
25  { month: "March", desktop: 237, mobile: 120 },
26  { month: "April", desktop: 73, mobile: 190 },
27  { month: "May", desktop: 209, mobile: 130 },
28  { month: "June", desktop: 214, mobile: 140 },
29]
30 
31const chartConfig = {
32  desktop: {
33    label: "Desktop",
34    color: "hsl(var(--chart-1))",
35  },
36  mobile: {
37    label: "Mobile",
38    color: "hsl(var(--chart-2))",
39  },
40} satisfies ChartConfig
41 
42export default function Component() {
43  return (
44    <Card>
45      <CardHeader>
46        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>
47        <CardDescription>January - June 2024</CardDescription>
48      </CardHeader>
49      <CardContent>
50        <ChartContainer config={chartConfig}>
51          <BarChart accessibilityLayer data={chartData}>
52            <CartesianGrid vertical={false} />
53            <XAxis
54              dataKey="month"
55              tickLine={false}
56              tickMargin={10}
57              axisLine={false}
58              tickFormatter={(value) => value.slice(0, 3)}
59            />
60            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
61            <ChartLegend content={<ChartLegendContent />} />
62            <Bar
63              dataKey="desktop"
64              stackId="a"
65              fill="var(--color-desktop)"
66              radius={[0, 0, 4, 4]}
67            />
68            <Bar
69              dataKey="mobile"
70              stackId="a"
71              fill="var(--color-mobile)"
72              radius={[4, 4, 0, 0]}
73            />
74          </BarChart>
75        </ChartContainer>
76      </CardContent>
77      <CardFooter className="flex-col items-start gap-2 text-sm">
78        <div className="flex gap-2 font-medium leading-none">
79          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
80        </div>
81        <div className="leading-none text-muted-foreground">
82          Showing total visitors for the last 6 months
83        </div>
84      </CardFooter>
85    </Card>
86  )
87}