chart-bar-mixed

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Bar, BarChart, XAxis, YAxis } 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: 275, fill: "var(--color-chrome)" },
22  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
23  { browser: "firefox", visitors: 187, 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 - Mixed</CardTitle>
59        <CardDescription>January - June 2024</CardDescription>
60      </CardHeader>
61      <CardContent>
62        <ChartContainer config={chartConfig}>
63          <BarChart
64            accessibilityLayer
65            data={chartData}
66            layout="vertical"
67            margin={{
68              left: 0,
69            }}
70          >
71            <YAxis
72              dataKey="browser"
73              type="category"
74              tickLine={false}
75              tickMargin={10}
76              axisLine={false}
77              tickFormatter={(value) =>
78                chartConfig[value as keyof typeof chartConfig]?.label
79              }
80            />
81            <XAxis dataKey="visitors" type="number" hide />
82            <ChartTooltip
83              cursor={false}
84              content={<ChartTooltipContent hideLabel />}
85            />
86            <Bar dataKey="visitors" layout="vertical" radius={5} />
87          </BarChart>
88        </ChartContainer>
89      </CardContent>
90      <CardFooter className="flex-col items-start gap-2 text-sm">
91        <div className="flex gap-2 font-medium leading-none">
92          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
93        </div>
94// … truncated