Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Radar charts #7925

Open
alexfauquette opened this issue Feb 13, 2023 · 9 comments
Open

[charts] Radar charts #7925

alexfauquette opened this issue Feb 13, 2023 · 9 comments
Assignees
Labels
component: charts This is the name of the generic UI component, not the React module! linked in docs The issue is linked in the docs, so completely skew the upvotes new feature New feature or request waiting for 👍 Waiting for upvotes

Comments

@alexfauquette
Copy link
Member

alexfauquette commented Feb 13, 2023

SCR-20241112-ueof

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

@alexfauquette alexfauquette added waiting for 👍 Waiting for upvotes component: charts This is the name of the generic UI component, not the React module! labels Feb 13, 2023
@oliviertassinari oliviertassinari added the linked in docs The issue is linked in the docs, so completely skew the upvotes label Jul 31, 2023
@oliviertassinari oliviertassinari added the new feature New feature or request label Aug 9, 2023
@palminha

This comment was marked as off-topic.

@dfirence
Copy link

dfirence commented Dec 1, 2023

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

IMG_0500

@cafe24-csryu01
Copy link

Please let us know any updates of this :)

@ReyesBTC

This comment was marked as resolved.

@oliviertassinari oliviertassinari changed the title [RFC][charts] Radar charts [charts][RFC] Radar charts Feb 13, 2024
@mui mui deleted a comment from ReyesBTC Mar 29, 2024
@yratush
Copy link

yratush commented Sep 5, 2024

very expected to go live 👍

@alexfauquette alexfauquette self-assigned this Sep 9, 2024
@alexfauquette alexfauquette changed the title [charts][RFC] Radar charts [charts] Radar charts Sep 9, 2024
@nattaphol-s
Copy link

Please coming soon.

@DevinSmith69
Copy link

Any idea on the go-live date? :)

@vpmartin
Copy link

Very excited on the radar charts!! Please make it happen.

@wondercreatemaster
Copy link

Can you make the labels clickable and customizable? I tried to find a radar chart with customizable labels, but couldn't find one.
Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! linked in docs The issue is linked in the docs, so completely skew the upvotes new feature New feature or request waiting for 👍 Waiting for upvotes
Projects
Status: Next in queue
Development

No branches or pull requests