chart-line-dots

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { CartesianGrid, Line, LineChart, 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  { 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} satisfies ChartConfig
39 
40export default function Component() {
41  return (
42    <Card>
43      <CardHeader>
44        <CardTitle>Line Chart - Dots</CardTitle>
45        <CardDescription>January - June 2024</CardDescription>
46      </CardHeader>
47      <CardContent>
48        <ChartContainer config={chartConfig}>
49          <LineChart
50            accessibilityLayer
51            data={chartData}
52            margin={{
53              left: 12,
54              right: 12,
55            }}
56          >
57            <CartesianGrid vertical={false} />
58            <XAxis
59              dataKey="month"
60              tickLine={false}
61              axisLine={false}
62              tickMargin={8}
63              tickFormatter={(value) => value.slice(0, 3)}
64            />
65            <ChartTooltip
66              cursor={false}
67              content={<ChartTooltipContent hideLabel />}
68            />
69            <Line
70              dataKey="desktop"
71              type="natural"
72              stroke="var(--color-desktop)"
73              strokeWidth={2}
74              dot={{
75                fill: "var(--color-desktop)",
76              }}
77              activeDot={{
78                r: 6,
79              }}
80            />
81          </LineChart>
82        </ChartContainer>
83      </CardContent>
84      <CardFooter className="flex-col items-start gap-2 text-sm">
85        <div className="flex gap-2 font-medium leading-none">
86          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
87        </div>
88        <div className="leading-none text-muted-foreground">
89          Showing total visitors for the last 6 months
90        </div>
91      </CardFooter>
92    </Card>
93  )
94// … truncated