Highcharts - areapline with negative values, the area should always be below
I would like to create a chart with Highcharts with negative values, for example:
http://jsfiddle.net/vargapeti/LjL03o8h/3/
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Area chart with negative values'
},
yAxis: {
title: {
text: 'value'
}
},
plotOptions: {
area: {
dataLabels: {
enabled: true
},
stacked: 'normal'
}
},
series: [{
name: 'Area with negative values',
data: [[0, -7.0], [1, 6.9], [1.5, 9.5], [3, -6]],
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[ 0, Highcharts.Color('#FFA500').setOpacity(1).get('rgba') ],
[ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
]
}
},
{
name: 'Area with positive values',
data: [[0, 13.0], [1, 26.9], [1.5, 29.5], [3, 14]],
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[ 0, Highcharts.Color('#d2d8df').setOpacity(1).get('rgba') ],
[ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
]
}
}
],
});
});
However, I need the orange area to always be between the X-axis and the curve, regardless of negative values. So basically I want to move the Positive Area curve below zero, but keep the filled area under the curve.
Is this possible with Highcharts?
Thank.
+3
source to share
2 answers
I don't quite understand your question.
To plot values above zero, you can do something like this,
yAxis: {
min:0
},
Check out this fiddle: http://jsfiddle.net/LjL03o8h/5/
+1
source to share
Just set threshold: null
for the areapline rows. For example: http://jsfiddle.net/LjL03o8h/6/
plotOptions: {
area: {
threshold: null
}
}
+1
source to share