I recently began working with highcharts and for my current project, I need a prototype chart that allows zooming in and out. Specifically, I want to display the y-axis value in the tooltip only when the user hovers directly over the points. However, in highcharts, hovering on the line displays the y-axis value of the nearest point in the tooltip. My issue arises when I zoom in to focus on a particular set of points. If I then hover over the line, it shows the y-axis value of points outside the visible chart area.
http://jsfiddle.net/ssaptarshii/hkn8c27n/
$(function () {
$('#container').highcharts({
chart:{
zoomType: 'xy'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
When I zoom in so that part of the graph from June to September extends beyond the chart area and then hover over the segment between June and July, the tooltip displays the y-axis value for July which is already off-screen. The y-axis value for July appears near the graph's title.
I do not want to display y-axis values in the tooltip that are outside the zoomed-in chart area, and I also wish to disable the feature of displaying points by hovering over the line.