Enable more dimensions (more than x & y) visualmap for line chart

[qiangxinglin]

What problem does this feature solve?

Currently, to make a horizontal gradient color line chart is only possible for dimension[1] (namely y). It will be more powerful to give the opportunity to decide the line color based on 3rd/4th column of the data. For example: data in following format [data category, data value, more value]

Note that I know there is a "category" option in visualmap to do a color mapping, but what I want is a "continuous gradient horizontal line which color is based on the third dimension (e.g. whether it > 1, < 0, etc.)". But for now, only the data point is colored, rather than the connecting line segment.

What does the proposed API look like?

No API change.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

[Ovilia]

This feature is supported right now. Checkout visualMap.dimension.

[qiangxinglin]

@Ovilia I know this option, but it only colored the data point rather than the line segment between them.

visualMap: {
  type: 'continuous',
  inRange: {
    color: ['orange', 'green', 'red'],
  },
  dimension: 3 // For line chart, it will only highlight the point if set the dimension > 1 
}

[pissang]

@qiangxinglin I will suggest you create three separate series.

[qiangxinglin]

@pissang I prefer to make the color of the line between each data point changed gradually (from slight green -> slight red etc., which is based on the 2 endpoints). What's the purpose of the 3 separate series? I'm looking for features like this in chart.js

[pissang]

For example:

const data = [1, 2, 3, 4, 5];
const series = [{
    type: 'line',
    lineStyle: {color: 'green' },
    data: data.map(item => item > 3 ? item : '-')
  },
  {
    type: 'line',
    lineStyle: {color: 'red' },
    data: data.map(item => item <= 3 ? item : '-')
  }
]
``

[qiangxinglin]

@pissang CMIIW, this will make a 3 colors line but the color is changed suddenly rather than gradually. I want the line color is based on the endpoints. e.g. Point color: 1 red, 3 green, 4 yellow, 5 red Then the line color: [1,3] red -> green, [3,4] green -> yellow, [4,5] yellow -> red

[pissang]

Understand, I thought you want the segmented line in your chart.js example link.

The gradient can only be linear on vertical and horizontal axis. So we fix only x and y dimensions can use visualMap on the line chart. Using another dimension will be non-linear.

[qiangxinglin]

@pissang Any solution?

[qiangxinglin]

Yeah, I understand completely. So either the gradient is entirely vertial or horizontal, will this feature be supported in the future? Does this kind of render will consume too much memory? I'm really appreciate the development staff to make it come true :)

[pissang]

I'm afraid we won't support it in the near future. You can calculate the color stops and use a gradient object on thelineStyle.color.

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!