I would like to fill a space between two lines that generally move up and down in tandem, but sometimes one is above the other, and sometimes the other way. And I'd like the fill color to reflect which line is on top.
Take this as an example. Where the lower and upper ends of the range cross over, between 6 Jul and 7 Jul, I'd like the fill colour to change. Is this possible?
$(function () {
var ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 28.6],
[1246665600000, 16.7, 28.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 22.7],
// low-high becomes high-low here
[1246924800000, 20.8, 19.5],
[1247011200000, 21.4, 17.5],
[1247097600000, 23.8, 15.2],
[1247184000000, 21.8, 14.6],
[1247270400000, 23.7, 13.7],
[1247356800000, 23.3, 13.0],
[1247443200000, 23.7, 12.6],
[1247529600000, 20.7, 12.8]
]
Highcharts.chart('container', {
title: {
text: 'Cross-over'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Range',
data: ranges,
type: 'areasplinerange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});