chart-area-default

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/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>Area Chart</CardTitle>
41        <CardDescription>
42          Showing total visitors for the last 6 months
43        </CardDescription>
44      </CardHeader>
45      <CardContent>
46        <ChartContainer config={chartConfig}>
47          <AreaChart
48            accessibilityLayer
49            data={chartData}
50            margin={{
51              left: 12,
52              right: 12,
53            }}
54          >
55            <CartesianGrid vertical={false} />
56            <XAxis
57              dataKey="month"
58              tickLine={false}
59              axisLine={false}
60              tickMargin={8}
61              tickFormatter={(value) => value.slice(0, 3)}
62            />
63            <ChartTooltip
64              cursor={false}
65              content={<ChartTooltipContent indicator="line" />}
66            />
67            <Area
68              dataKey="desktop"
69              type="natural"
70              fill="var(--color-desktop)"
71              fillOpacity={0.4}
72              stroke="var(--color-desktop)"
73            />
74          </AreaChart>
75        </ChartContainer>
76      </CardContent>
77      <CardFooter>
78        <div className="flex w-full items-start gap-2 text-sm">
79          <div className="grid gap-2">
80            <div className="flex items-center gap-2 font-medium leading-none">
81              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
82            </div>
83            <div className="flex items-center gap-2 leading-none text-muted-foreground">
84              January - June 2024
85            </div>
86          </div>
87        </div>
88      </CardFooter>
89    </Card>
90  )
91}