eCharts: How to change line colors for positive and negative values?

0
votes

I want to color the area "under" the graph (i.e. between zero and value) green when positive, and red when negative, on an eCharts line graph.

Like this Like this

We have already done it with a bar graph (below), but now we need to do it with a line graph.

bar graph

1
echarts

1 Answers

1
votes

You can achieve this by setting the visualMap property. I have done some hit and trial and achieved the following.

 var myChart = echarts.init(document.getElementById('main'));

 option = {
   xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     type: 'value'
   },
   series: [{
     data: [820, 932, 901, -1200, -800, 1330, 1320],
     type: 'line',
     areaStyle: {}
   }],
   visualMap: {
     left: 'right',
     min: 0,
     max: 1,
     inRange: {
       color: ['red', 'green']
     },
     text: ['>0', '<0'],
     calculable: true
   },
 };

 // use configuration item and data specified to show chart
 myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>