Step Line Chart

"use client"import { TrendingUp } from "lucide-react"import { CartesianGrid, Line, LineChart, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A line chart with step"const chartData = [  { month: "January", desktop: 186 },  { month: "February", desktop: 305 },  { month: "March", desktop: 237 },  { month: "April", desktop: 73 },  { month: "May", desktop: 209 },  { month: "June", desktop: 214 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },} satisfies ChartConfigexport function ChartLineStep() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="text-center mb-4">        <h3 className="text-lg font-semibold">Line Chart - Step</h3>        <p className="text-sm text-muted-foreground">January - June 2024</p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer config={chartConfig} className="w-full h-[250px]">          <LineChart            accessibilityLayer            data={chartData}            margin={{              left: 12,              right: 12,            }}          >            <CartesianGrid vertical={false} />            <XAxis              dataKey="month"              tickLine={false}              axisLine={false}              tickMargin={8}              tickFormatter={(value) => value.slice(0, 3)}            />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <Line              dataKey="desktop"              type="step"              stroke="var(--color-desktop)"              strokeWidth={2}              dot={false}            />          </LineChart>        </ChartContainer>      </div>      <div className="flex flex-col gap-1 text-sm text-center mt-4">        <div className="flex items-center justify-center gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground flex items-center justify-center gap-2 leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}