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
We have already done it with a bar graph (below), but now we need to do it with a line graph.
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>