Chart

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/registry/axon/ui/card"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/registry/axon/ui/chart"export const description = "A bar chart"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 default function ChartBarDefault() {  return (    <Card>      <CardHeader>        <CardTitle>Bar Chart</CardTitle>        <CardDescription>January - June 2024</CardDescription>      </CardHeader>      <CardContent>        <ChartContainer config={chartConfig}>          <BarChart accessibilityLayer data={chartData}>            <CartesianGrid vertical={false} />            <XAxis              dataKey="month"              tickLine={false}              tickMargin={10}              axisLine={false}              tickFormatter={(value) => value.slice(0, 3)}            />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />          </BarChart>        </ChartContainer>      </CardContent>      <CardFooter className="flex-col items-start gap-2 text-sm">        <div className="flex 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 leading-none">          Showing total visitors for the last 6 months        </div>      </CardFooter>    </Card>  )}