Positive/Negative Bar Chart

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A bar chart with negative values"const chartData = [  { month: "January", visitors: 186 },  { month: "February", visitors: 205 },  { month: "March", visitors: -207 },  { month: "April", visitors: 173 },  { month: "May", visitors: -209 },  { month: "June", visitors: 214 },]const chartConfig = {  visitors: {    label: "Visitors",  },} satisfies ChartConfigexport function ChartBarNegative() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col gap-1 pb-4 mb-4 border-b">        <h3 className="text-lg font-semibold">Bar Chart - Negative</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="h-[250px] w-full">          <BarChart accessibilityLayer data={chartData}>            <CartesianGrid vertical={false} />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel hideIndicator />}            />            <Bar dataKey="visitors">              <LabelList position="top" dataKey="month" fillOpacity={1} />              {chartData.map((item) => (                <Cell                  key={item.month}                  fill={item.visitors > 0 ? "var(--chart-1)" : "var(--chart-2)"}                />              ))}            </Bar>          </BarChart>        </ChartContainer>      </div>      <div className="flex flex-col items-start gap-2 text-sm pt-4 border-t">        <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>      </div>    </div>  )}