recharts
recharts copied to clipboard
Issue with duplicated category in RadarCharts
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