recharts icon indicating copy to clipboard operation
recharts copied to clipboard

Issue with duplicated category in RadarCharts

Open dscape opened this issue 8 months ago • 5 comments

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Radar charts with duplicate category's fail to render values when there's duplicated categories. Tooltips still work perfectly though

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar (template: https://codesandbox.io/p/sandbox/simple-line-chart-v25dl4).

When I write this code

import React, { PureComponent } from 'react';
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';

const data =  [
    {
        "Key": "A",
        "Val": 12,
    },
    {
        "Key": "B",
        "Val": 3,
    },
    {
        "Key": "A", // this is the relevant line, change to C and it works
        "Val": 10,
    },
];

export default class Example extends PureComponent {
  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
          <PolarGrid />
          <PolarAngleAxis dataKey="Key" />
          <PolarRadiusAxis />
          <Radar  dataKey="Val" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
        </RadarChart>
      </ResponsiveContainer>
    );
  }
}

I don't get the radar chart to render correctly.

What is the expected behavior?

Given allowDuplicatedCategory is not on I would expect it to render two A's, one with Val 10 and another with Val 12

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Latest version from npm

dscape avatar Jun 13 '24 16:06 dscape