chart-line-label-custom

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { CartesianGrid, LabelList, Line, LineChart } 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    color: "hsl(var(--chart-2))",
32  },
33  chrome: {
34    label: "Chrome",
35    color: "hsl(var(--chart-1))",
36  },
37  safari: {
38    label: "Safari",
39    color: "hsl(var(--chart-2))",
40  },
41  firefox: {
42    label: "Firefox",
43    color: "hsl(var(--chart-3))",
44  },
45  edge: {
46    label: "Edge",
47    color: "hsl(var(--chart-4))",
48  },
49  other: {
50    label: "Other",
51    color: "hsl(var(--chart-5))",
52  },
53} satisfies ChartConfig
54 
55export default function Component() {
56  return (
57    <Card>
58      <CardHeader>
59        <CardTitle>Line Chart - Custom Label</CardTitle>
60        <CardDescription>January - June 2024</CardDescription>
61      </CardHeader>
62      <CardContent>
63        <ChartContainer config={chartConfig}>
64          <LineChart
65            accessibilityLayer
66            data={chartData}
67            margin={{
68              top: 24,
69              left: 24,
70              right: 24,
71            }}
72          >
73            <CartesianGrid vertical={false} />
74            <ChartTooltip
75              cursor={false}
76              content={
77                <ChartTooltipContent
78                  indicator="line"
79                  nameKey="visitors"
80                  hideLabel
81                />
82              }
83            />
84            <Line
85              dataKey="visitors"
86              type="natural"
87              stroke="var(--color-visitors)"
88              strokeWidth={2}
89              dot={{
90                fill: "var(--color-visitors)",
91              }}
92              activeDot={{
93                r: 6,
94              }}
95            >
96              <LabelList
97                position="top"
98                offset={12}
99                className="fill-foreground"
100                fontSize={12}
101// … truncated