chart-bar-label

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Bar, BarChart, CartesianGrid, LabelList, XAxis } 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 },
22  { month: "February", desktop: 305 },
23  { month: "March", desktop: 237 },
24  { month: "April", desktop: 73 },
25  { month: "May", desktop: 209 },
26  { month: "June", desktop: 214 },
27]
28 
29const chartConfig = {
30  desktop: {
31    label: "Desktop",
32    color: "hsl(var(--chart-1))",
33  },
34} satisfies ChartConfig
35 
36export default function Component() {
37  return (
38    <Card>
39      <CardHeader>
40        <CardTitle>Bar Chart - Label</CardTitle>
41        <CardDescription>January - June 2024</CardDescription>
42      </CardHeader>
43      <CardContent>
44        <ChartContainer config={chartConfig}>
45          <BarChart
46            accessibilityLayer
47            data={chartData}
48            margin={{
49              top: 20,
50            }}
51          >
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
61              cursor={false}
62              content={<ChartTooltipContent hideLabel />}
63            />
64            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
65              <LabelList
66                position="top"
67                offset={12}
68                className="fill-foreground"
69                fontSize={12}
70              />
71            </Bar>
72          </BarChart>
73        </ChartContainer>
74      </CardContent>
75      <CardFooter className="flex-col items-start gap-2 text-sm">
76        <div className="flex gap-2 font-medium leading-none">
77          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
78        </div>
79        <div className="leading-none text-muted-foreground">
80          Showing total visitors for the last 6 months
81        </div>
82      </CardFooter>
83    </Card>
84  )
85}