chart-bar-label-custom

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
5 
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/registry/default/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19} from "@/registry/default/ui/chart"
20const chartData = [
21  { month: "January", desktop: 186, mobile: 80 },
22  { month: "February", desktop: 305, mobile: 200 },
23  { month: "March", desktop: 237, mobile: 120 },
24  { month: "April", desktop: 73, mobile: 190 },
25  { month: "May", desktop: 209, mobile: 130 },
26  { month: "June", desktop: 214, mobile: 140 },
27]
28 
29const chartConfig = {
30  desktop: {
31    label: "Desktop",
32    color: "hsl(var(--chart-1))",
33  },
34  mobile: {
35    label: "Mobile",
36    color: "hsl(var(--chart-2))",
37  },
38  label: {
39    color: "hsl(var(--background))",
40  },
41} satisfies ChartConfig
42 
43export default function Component() {
44  return (
45    <Card>
46      <CardHeader>
47        <CardTitle>Bar Chart - Custom Label</CardTitle>
48        <CardDescription>January - June 2024</CardDescription>
49      </CardHeader>
50      <CardContent>
51        <ChartContainer config={chartConfig}>
52          <BarChart
53            accessibilityLayer
54            data={chartData}
55            layout="vertical"
56            margin={{
57              right: 16,
58            }}
59          >
60            <CartesianGrid horizontal={false} />
61            <YAxis
62              dataKey="month"
63              type="category"
64              tickLine={false}
65              tickMargin={10}
66              axisLine={false}
67              tickFormatter={(value) => value.slice(0, 3)}
68              hide
69            />
70            <XAxis dataKey="desktop" type="number" hide />
71            <ChartTooltip
72              cursor={false}
73              content={<ChartTooltipContent indicator="line" />}
74            />
75            <Bar
76              dataKey="desktop"
77              layout="vertical"
78              fill="var(--color-desktop)"
79              radius={4}
80            >
81              <LabelList
82                dataKey="month"
83                position="insideLeft"
84                offset={8}
85                className="fill-[--color-label]"
86                fontSize={12}
87              />
88              <LabelList
89                dataKey="desktop"
90                position="right"
91                offset={8}
92                className="fill-foreground"
93                fontSize={12}
94// … truncated