[charts] Radar charts

[alexfauquette]

Benchmarks

• Recharts
• Nivo
• Highcharts
• Echarts

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/

[palminha]

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

[dfirence]

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

[cafe24-csryu01]

Please let us know any updates of this :)

[ReyesBTC]

Yes please!!! upvote!!

[yratush]

very expected to go live 👍