Color-Coded Line Chart

"use client"import { TrendingUp } from "lucide-react"import { CartesianGrid, Dot, Line, LineChart } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A line chart with dots and colors"const chartData = [  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },  { browser: "other", visitors: 90, fill: "var(--color-other)" },]const chartConfig = {  visitors: {    label: "Visitors",    color: "var(--chart-2)",  },  chrome: {    label: "Chrome",    color: "var(--chart-1)",  },  safari: {    label: "Safari",    color: "var(--chart-2)",  },  firefox: {    label: "Firefox",    color: "var(--chart-3)",  },  edge: {    label: "Edge",    color: "var(--chart-4)",  },  other: {    label: "Other",    color: "var(--chart-5)",  },} satisfies ChartConfigexport function ChartLineDotsColors() {  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 - Dots Colors</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={{              top: 24,              left: 24,              right: 24,            }}          >            <CartesianGrid vertical={false} />            <ChartTooltip              cursor={false}              content={                <ChartTooltipContent                  indicator="line"                  nameKey="visitors"                  hideLabel                />              }            />            <Line              dataKey="visitors"              type="natural"              stroke="var(--color-visitors)"              strokeWidth={2}              dot={({ payload, ...props }) => {                return (                  <Dot                    key={payload.browser}                    r={5}                    cx={props.cx}                    cy={props.cy}                    fill={payload.fill}                    stroke={payload.fill}                  />                )              }}            />          </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>  )}