chart-area-icons

1"use client"
2 
3import { TrendingDown, 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/default/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartLegend,
18  ChartLegendContent,
19  ChartTooltip,
20  ChartTooltipContent,
21} from "@/registry/default/ui/chart"
22const chartData = [
23  { month: "January", desktop: 186, mobile: 80 },
24  { month: "February", desktop: 305, mobile: 200 },
25  { month: "March", desktop: 237, mobile: 120 },
26  { month: "April", desktop: 73, mobile: 190 },
27  { month: "May", desktop: 209, mobile: 130 },
28  { month: "June", desktop: 214, mobile: 140 },
29]
30 
31const chartConfig = {
32  desktop: {
33    label: "Desktop",
34    color: "hsl(var(--chart-1))",
35    icon: TrendingDown,
36  },
37  mobile: {
38    label: "Mobile",
39    color: "hsl(var(--chart-2))",
40    icon: TrendingUp,
41  },
42} satisfies ChartConfig
43 
44export default function Component() {
45  return (
46    <Card>
47      <CardHeader>
48        <CardTitle>Area Chart - Icons</CardTitle>
49        <CardDescription>
50          Showing total visitors for the last 6 months
51        </CardDescription>
52      </CardHeader>
53      <CardContent>
54        <ChartContainer config={chartConfig}>
55          <AreaChart
56            accessibilityLayer
57            data={chartData}
58            margin={{
59              left: 12,
60              right: 12,
61            }}
62          >
63            <CartesianGrid vertical={false} />
64            <XAxis
65              dataKey="month"
66              tickLine={false}
67              axisLine={false}
68              tickMargin={8}
69              tickFormatter={(value) => value.slice(0, 3)}
70            />
71            <ChartTooltip
72              cursor={false}
73              content={<ChartTooltipContent indicator="line" />}
74            />
75            <Area
76              dataKey="mobile"
77              type="natural"
78              fill="var(--color-mobile)"
79              fillOpacity={0.4}
80              stroke="var(--color-mobile)"
81              stackId="a"
82            />
83            <Area
84              dataKey="desktop"
85              type="natural"
86              fill="var(--color-desktop)"
87              fillOpacity={0.4}
88              stroke="var(--color-desktop)"
89              stackId="a"
90            />
91            <ChartLegend content={<ChartLegendContent />} />
92          </AreaChart>
93        </ChartContainer>
94      </CardContent>
95      <CardFooter>
96// … truncated