chart-bar-active

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Bar, BarChart, CartesianGrid, Rectangle, 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  ChartTooltip,
18  ChartTooltipContent,
19} from "@/registry/new-york/ui/chart"
20const chartData = [
21  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
22  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
23  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
24  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
25  { browser: "other", visitors: 90, fill: "var(--color-other)" },
26]
27 
28const chartConfig = {
29  visitors: {
30    label: "Visitors",
31  },
32  chrome: {
33    label: "Chrome",
34    color: "hsl(var(--chart-1))",
35  },
36  safari: {
37    label: "Safari",
38    color: "hsl(var(--chart-2))",
39  },
40  firefox: {
41    label: "Firefox",
42    color: "hsl(var(--chart-3))",
43  },
44  edge: {
45    label: "Edge",
46    color: "hsl(var(--chart-4))",
47  },
48  other: {
49    label: "Other",
50    color: "hsl(var(--chart-5))",
51  },
52} satisfies ChartConfig
53 
54export default function Component() {
55  return (
56    <Card>
57      <CardHeader>
58        <CardTitle>Bar Chart - Active</CardTitle>
59        <CardDescription>January - June 2024</CardDescription>
60      </CardHeader>
61      <CardContent>
62        <ChartContainer config={chartConfig}>
63          <BarChart accessibilityLayer data={chartData}>
64            <CartesianGrid vertical={false} />
65            <XAxis
66              dataKey="browser"
67              tickLine={false}
68              tickMargin={10}
69              axisLine={false}
70              tickFormatter={(value) =>
71                chartConfig[value as keyof typeof chartConfig]?.label
72              }
73            />
74            <ChartTooltip
75              cursor={false}
76              content={<ChartTooltipContent hideLabel />}
77            />
78            <Bar
79              dataKey="visitors"
80              strokeWidth={2}
81              radius={8}
82              activeIndex={2}
83              activeBar={({ ...props }) => {
84                return (
85                  <Rectangle
86                    {...props}
87                    fillOpacity={0.8}
88                    stroke={props.payload.fill}
89                    strokeDasharray={4}
90                    strokeDashoffset={4}
91                  />
92                )
93              }}
94            />
95// … truncated