Highcharts - How to Highlight a specific portion of a line graph? - highcharts

Question

Does anyone know if we can achieve something like this in Highcharts?
We wish that a certain rectangular area gets highlighted when the user mouseover the charts.
Did anyone accomplish something similar before that may help us here?
Thank you.

Answer 1

You can use renderer to render any shape on mouseover and hide it on mouseleave. Positioning rendered shapes require some calculation/coding but it gives you total freedom.
From the picture you posted, you can also use an easier approach, not the most elegant, but it is fast in getting the result. Create a hidden series, specify the points which will define the area and show/hide it on events.
series: [{
data: [5, 10, 15, 10, 5],
color: 'rgba(0,0,200, 0.2)',
states: {
hover: {
enabled: false
}
}
}, {
id: 'h1',
data: [
[1, 10], {
x: 2,
y: 15,
marker: {
enabled: true,
fillColor: 'black',
symbol: 'circle'
}
},
[3, 10]
],
marker: {
enabled: false
},
linkedTo: 's1',
visible: false,
enableMouseTracking: false
}],
example: http://jsfiddle.net/9L4e328j/

Answer 2

I haven't tried this , but you can try something like this to get the desired result :
tooltip: {
formatter: function() {
//resetting state
for(i=0;i<this.series.data.length;i++){
this.series.data[i].setState();
}
var index=this.series.data.indexOf( this.point )
//setting state on the current,previous,next point
this.series.data[index].setState('hover');
this.series.data[index-1].setState('hover');
this.series.data[index+1].setState('hover');
return "your tooltip";
}
}