chart-area-step

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