Highcharts - Area between two y values highlighted
-
12-12-2019 - |
Question
I have a situation where I need to predict a trend in a time series, and I have to display confidence intervals. Is there a way to plot two sets of y-values in Highcharts as linked, and shade the area between the two? Something like this:
http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg
I have five time series: the prediction, two time series that bound the narrower confidence interval, and two more time series that bound the wider confidence interval.
Solution
The new Beta has that feature:
You can read more about the upcoming features in this post.
OTHER TIPS
Highcharts does not natively support range charts (as of version 2.2.5), but there is a workaround. You can stack two area series on top of each other, with the foremost series having a background color matching that of the chart background.
And here is example javascript (that results in this chart):
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Range chart emulation'
},
xAxis: {
},
yAxis: {
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 0,
stacking: 'normal'
}
},
series: [{
// this series defines the height of the range
name: 'Range',
data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
}, {
// this series defines the bottom values
name: 'Dummy',
data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
enableMouseTracking: false,
showInLegend: false,
fillColor: 'rgba(255, 255, 255, 0)'
}]
});
});