8-bit Chart Area Step

1"use client";
2 
3import { Activity } from "lucide-react";
4import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
5 
6import {
7  type ChartConfig,
8  ChartContainer,
9  ChartTooltip,
10  ChartTooltipContent,
11} from "@/components/ui/8bit/chart";
12 
13export const description = "A step area chart";
14 
15const chartData = [
16  { month: "January", desktop: 99 },
17  { month: "February", desktop: 204 },
18  { month: "March", desktop: 180 },
19  { month: "April", desktop: 120 },
20  { month: "May", desktop: 180 },
21  { month: "June", desktop: 42 },
22];
23 
24const chartConfig = {
25  desktop: {
26    label: "Desktop",
27    color: "var(--chart-1)",
28    icon: Activity,
29  },
30} satisfies ChartConfig;
31 
32export default function ChartAreaStep() {
33  return (
34    <ChartContainer config={chartConfig}>
35      <AreaChart
36        data={chartData}
37        margin={{
38          left: 20,
39          right: 20,
40        }}
41      >
42        <CartesianGrid vertical={false} />
43        <XAxis
44          dataKey="month"
45          tickLine={false}
46          axisLine={false}
47          tickMargin={8}
48          tickFormatter={(value) => value.slice(0, 3)}
49        />
50        <ChartTooltip
51          cursor={false}
52          content={<ChartTooltipContent hideLabel />}
53        />
54        <Area
55          dataKey="desktop"
56          type="step"
57          fill="var(--color-desktop)"
58          stroke="var(--color-desktop)"
59          activeDot={{
60            fill: "var(--chart-active-dot)",
61          }}
62        />
63      </AreaChart>
64    </ChartContainer>
65  );
66}