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

[Feature] redesign radar chart like polar #19182

Open
helgasoft opened this issue Oct 10, 2023 · 3 comments
Open

[Feature] redesign radar chart like polar #19182

helgasoft opened this issue Oct 10, 2023 · 3 comments
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature.

Comments

@helgasoft
Copy link

helgasoft commented Oct 10, 2023

What problem does this feature solve?

The feature could solve several current radar problems like #16605, #15339, #10750, #10537, #20109, etc.
Current design is custom, unique and inconsistent with other charts. As a result, support and maintenance are more difficult.

What does the proposed API look like?

Current radar series structure treats individual series as data :

series: [{
  type: 'radar',
  data : [
    {
        value : [4300, 10000, 28000, 35000, 50000, 19000],
        name : 'Allocated Budget'
    },
    {
        value : [5000, 14000, 28000, 31000, 42000, 21000],
        name : 'Actual Spending'
    }
  ]
}]

Proposed API is having individual line series, as in polar. Radar is similar to polar but does not have its own coordinateSystem.

series: [
  {  type: 'line', name: 'Allocated Budget', coordinateSystem: 'radar',
     data : [ 4300, 10000, 28000, 35000, 50000, 19000]
  },
  {  type: 'line', name: 'Actual Spending', coordinateSystem: 'radar',
     data : [5000, 14000, 28000, 31000, 42000, 21000]
  }
]

I think radar chart could be restructured like polar. With its specific radar axis and coordinateSystem.
Radar axis may also borrow characteristics from parallelAxis, which is similar.
Radar series could be redesigned to imitate series-parallel, or just be replaced by series-line.
As a result of those convergences radar chart will become consistent with other series in ECharts.

Demo Code - polar imitating a radar chart

image

@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels Oct 10, 2023
@Ovilia
Copy link
Contributor

Ovilia commented Oct 10, 2023

Hi @helgasoft . Thanks for your suggestion. Can you be more specific about the supposed new radar series option?

As about the radar tooltip indicator, I was once trying to fix the problem and yes it's difficult because radar's indicator is a different concept than an axis. Instead, one indicator is itself one axis rather than a category in an axis.

@helgasoft
Copy link
Author

helgasoft commented Oct 10, 2023

@Ovilia, thank you for replying. Hope other developers would also participate in the conversation.
My view is strictly API and UI driven, did not analyze source code.

The present

Radar chart is working, it's a simple chart with few customisations available. But the most important, tooltips, is flawed because of series-radar.data structure. When people try to customize tooltips (#19004), they find dataIndex unusable.
See Demo Code for this and other oddities like:

  • tooltip.valueFormatter also does not provide dataIndex, see #20109
  • radar.indicator usually needs a max value because it cannot evaluate axis data, as parallelAxis does. Without max radar points go to arbitrary positions !
  • indicators cannot handle categorical values, as parallelAxis does.
  • indicators have only names but not labels, as parallelAxis does. We have to rely on tooltips to find out what the values are. One indicator range could be 1K to 1M, the next -1M to 0.
  • indicator names have a strange non-customizable tooltip that just repeats the name, and only after triggerEvent is set to true (?!)
  • radar.blur.itemStyle does not work, see #20320
  • individual values cannot be styled with itemStyle, lineStyle, label, etc. #20241
  • grid.containLabel does not work with radar chart
  • universalTransition under doubt: I could not morph into bars because of series-radar.data structure

A better radar chart

I consider radar an axis, like parallelAxis. There are many similarities between them, one notable difference being the layout - radar is radial, parallelAxis is horizontal.
I also like polar's angleAxis for the ability to display simple line series with their points (parallelAxis doesn't do points).
Please note also that both polar and parallel charts have their own coordinateSystem.
So the goal would be to merge code from angleAxis and parallelAxis to get a new better radarAxis.
Once this is accomplished, we would start using series-line with coordinateSystem:'radar' and radarIndex:0, and series-radar will become obsolete.
Advantages:

  • simpler, more consistent API
  • support for dataset, see parallel Demo
  • support for categorical data
  • customizable tooltips and values
  • simple universalTransition to other charts

That is my opinion, other's are readily welcome.

@wozien
Copy link

wozien commented Apr 10, 2024

mark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

3 participants