[charts] Radar charts - Githubissues

alexfauquette commented 1 year ago

Data format

Recharts From the array of objects, specify a key for the radial axis with <PolarAngleAxis dataKey="..." /> and a key per` plot
Nivo Same approach. An array of objects and a property indexBy: string to select the angles labels. And keys: string[] to select the values of each chart
Hight charts Same as line or area. You define a serie per set of data you want to plot. And the radial aspect comes from the options chart.polar: true and the xAxis
```
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
    format: '{value}°'
}
},
```

Echarts Use two settings. the radars that specify the context (how many corners and their max value) and then the series to display in it

radar: {
indicator: [
  { name: 'Sales', max: 6500 },
  ...
]
},
series: [
{
  name: 'Budget vs spending',
  type: 'radar',
  data: [
    {
      value: [4200, 3000, 20000, 35000, 50000, 18000],
      name: 'Allocated Budget'
    },
    ...
  ]
}
]

MUI X Radar chart

https://mui.com/x/react-charts/radar/

Benchmarks

Recharts: https://recharts.org/en-US/examples/SimpleRadarChart
Nivo: https://nivo.rocks/radar/
Highcharts: https://www.highcharts.com/demo/polar
Echarts: https://echarts.apache.org/examples/en/editor.html?c=radar

palminha commented 1 year ago

while this one is not ready, i think i will try react-charts-2 : https://react-chartjs-2.js.org/

dfirence commented 11 months ago

Super excited about these, I have been relying on Echarts and Nivo, would love to simplify my code bases. Regarding Radar, would really appreciate if the area of the radar can be implemented, below is one my my apps. The crucial features I love about Echarts are

Full control of the Radar grid rings (dimensions)
Full control of the colors for points (dots), areas through gradients, tick lines, title, subtitles
Events for click interactions on the points
Data Legend of Radar