chart-area-gradient

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Area, AreaChart, CartesianGrid, 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>Area Chart - Gradient</CardTitle>
45        <CardDescription>
46          Showing total visitors for the last 6 months
47        </CardDescription>
48      </CardHeader>
49      <CardContent>
50        <ChartContainer config={chartConfig}>
51          <AreaChart
52            accessibilityLayer
53            data={chartData}
54            margin={{
55              left: 12,
56              right: 12,
57            }}
58          >
59            <CartesianGrid vertical={false} />
60            <XAxis
61              dataKey="month"
62              tickLine={false}
63              axisLine={false}
64              tickMargin={8}
65              tickFormatter={(value) => value.slice(0, 3)}
66            />
67            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
68            <defs>
69              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
70                <stop
71                  offset="5%"
72                  stopColor="var(--color-desktop)"
73                  stopOpacity={0.8}
74                />
75                <stop
76                  offset="95%"
77                  stopColor="var(--color-desktop)"
78                  stopOpacity={0.1}
79                />
80              </linearGradient>
81              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
82                <stop
83                  offset="5%"
84                  stopColor="var(--color-mobile)"
85                  stopOpacity={0.8}
86                />
87                <stop
88                  offset="95%"
89// … truncated