I would like to create a chart with Highcharts, with negative values, like this:
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') ]
]
}
}
],
});
});
I need however, the orange area to be always between the X-axis and the curve, regardless of the negative values. So basically I want to shift the curve "Area with positive values" under zero, but keep the filled up area under the curve.
Is it possible with Highcharts anyhow?
Thank you.
Simply set
threshold: null
for areaspline series. For example: http://jsfiddle.net/LjL03o8h/6/Just check this answer, it might help you. Also because you have negative an positives both in same series, you might want to check this and this.
I don't fully understand your question.
To plot the values above zero, you can do something like this ,
Check this fiddle:http://jsfiddle.net/LjL03o8h/5/