[bug]: Chart Legend Each child in a list should have a unique "key" prop.

[modyabhi]

Describe the bug

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartConfig,
  ChartLegend,
  ChartLegendContent
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  RadialBar,
  RadialBarChart,
  ResponsiveContainer,
} from "recharts";
import { Tractor, GraduationCap, Trees, Stethoscope, Home, Building2, HelpCircle, Factory, Droplets, Train } from 'lucide-react';

const data = [
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Transport",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.17,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Commercial",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.04,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Parkland",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.05,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Residential",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 1.55,
  },
];

const categoryIcons = {
  "Primary Production": Tractor,
  Education: GraduationCap,
  Parkland: Trees,
  "Hospital/Medical": Stethoscope,
  Residential: Home,
  Commercial: Building2,
  Other: HelpCircle,
  Industrial: Factory,
  Water: Droplets,
  Transport: Train,
};

const muted_colors = [
  "hsl(var(--chart-1))",
  "hsl(var(--chart-2))",
  "hsl(var(--chart-3))",
  "hsl(var(--chart-4))",
  "hsl(var(--chart-5))",
];

export default function AreaBreakdown() {
  const totalArea = data.reduce((sum, item) => sum + item.AREA_SQM, 0);
  const chartData = data.map((item, index) => ({
    category: item.MB_CATEGORY_2021,
    SQM: item.AREA_SQM,
    fill: muted_colors[index % muted_colors.length],
    icon:
      categoryIcons[item.MB_CATEGORY_2021 as keyof typeof categoryIcons] ||
      HelpCircle,
  }));

  const chartConfig: ChartConfig = {
    ...Object.fromEntries(
      data.map((item, index) => [
        item.MB_CATEGORY_2021,
        {
          label: item.MB_CATEGORY_2021,
          color: muted_colors[index % muted_colors.length],
          value: item.AREA_SQM,
        }
      ])
    )
  };

  return (
    <div className="w-full max-w-4xl mx-auto p-4 space-y-4">
      <Card className="w-full">
        <CardHeader>
          <CardTitle>Area Breakdown - {data[0].SAL_NAME_2021}</CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <ChartContainer
            config={chartConfig}
            className="h-[400px]"
          >
            <ResponsiveContainer width="100%" height="100%">
              <RadialBarChart
                innerRadius="10%"
                outerRadius="80%"
                data={chartData}
                startAngle={90}
                endAngle={-180}
              >
                <PolarGrid gridType="circle" />
                <PolarAngleAxis
                  type="number"
                  domain={[0, "auto"]}
                  tick={false}
                />
                <RadialBar
                  label={{ 
                    position: "end", 
                    // fill: "#888", 
                    fontSize: 12,
                    formatter: (value: number) => `${value.toFixed(2)} sqm`
                  }}
                  cornerRadius={25}
                  dataKey="SQM"
                />
                <ChartLegend content={<ChartLegendContent nameKey="category" />} />
                <ChartTooltip 
                  content={<ChartTooltipContent labelKey="SQM" nameKey="category"/>}
                />
              </RadialBarChart>
            </ResponsiveContainer>
          </ChartContainer>
        </CardContent>
      </Card>
    </div>
  );
}

Affected component/components

charts

How to reproduce

<ChartLegend content={} />

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Nextjs15+React19
Windows

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[ghost]

Hello, you seem to be ESL. Have you tried racemixing?

[modyabhi]

Hello, you seem to be ESL. Have you tried racemixing?

Sorry i have no idea what that means, I also tried to use the example block form shadcn ui, still getting the same error. Seems to be an issue with using Legend with the RadialBars they aren't playing nice.

"use client"

import { TrendingUp } from "lucide-react"
import { PolarGrid, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
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",
  },
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
  firefox: {
    label: "Firefox",
    color: "hsl(var(--chart-3))",
  },
  edge: {
    label: "Edge",
    color: "hsl(var(--chart-4))",
  },
  other: {
    label: "Other",
    color: "hsl(var(--chart-5))",
  },
} satisfies ChartConfig

export function AreaBreakdown() {
  return (
    <Card className="flex flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart - Grid</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <PolarGrid gridType="circle" />
            <RadialBar dataKey="visitors" />
            <ChartLegend content={<ChartLegendContent nameKey="browser"/>}/>
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col gap-2 text-sm">
        <div className="flex items-center gap-2 font-medium leading-none">
          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
        </div>
        <div className="leading-none text-muted-foreground">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
    </Card>
  )
}