Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use echarts visualMap to color Line depending on Y-Axis Value or category

See original GitHub issue

How can I use the visualMap correctly to higlight a Line or AreaChart depending on a certain Y Axis VAlue. How can I set up ranges?

Another question, how can I use the visualMap to change the behaviour (color) of certain data depending on the catergory. How could I give my dataseries a parameter like “red” or “green” and use that with the visualMap?

With the follwoing code I can change the color of the data points via a certain category:

<html>
<head>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>

<script type="text/javascript">

    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main_chart'));

    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'value'
           

        },
        yAxis: {
            type: 'value'
        },
        visualMap: {
        show: true,
        dimension: 2,
        categories: ['Test'],
        inRange: {
        
                color: 'red'
            },
            outOfRange: {
                color: 'green'
            
            }       
    },
        series: [{
            data: [[1,37,'Test'],[2,36,'Hallo'],[3,36,'Hallo']],


            type: 'line',
            areaStyle: {}    
 

        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


</body>
</html>

How can I use this to change the color of the connecting lines?

Issue Analytics

State:
Created 5 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

mmp1100000commented, Jul 13, 2020

https://echarts.apache.org/examples/en/editor.html?c=line-aqi

0reactions

buhichancommented, Apr 12, 2021

currently visualMap over Y-axis seems buggy to me, see https://codesandbox.io/s/dreamy-neumann-b8iz9?file=/src/App.js

if use the pieces around lines#47, it throws error, I have to hack it around by add lower bound and upper bound stops.
Threshold value between stops have to depend on canvas size and line width, or else you will get a buggy “double color line”. Try adjust the threshold range input in the example.

I wish there exists a lower level API to draw different line segment based on individual data item, instead of the current linear gradient solution.

Top Results From Across the Web

How to use echarts visualMap to color Line depending on X ...

I want to divide single line into 2 parts based on x axis value. Example, when x-value is greater than "2016-8" show dashed...

Visual Mapping - Concepts - Handbook - Apache ECharts

Every type of charts in Apache EChartsTM has this built-in mapping procedure. For example, line chart map data into lines, bar chart map...

Documentation - Apache ECharts

Apache ECharts, a powerful, interactive charting and visualization library for browser.

ECharts Document

initialize ECharts instance based on prepared dom var myChart ... dataType: string, // input data value value: number|Array // color of component (useful ......

Charts configure - pyecharts

xyAxis：x, y axis in cartesian coordinate system(Line, Bar, Scatter, ... visualMap：It is a type of component for visual encoding, which maps the data...