I have run into an issue with highcharts tooltip positioning, where the tooltip gets rendered below the point, partially outside of the viewport even when there is sufficient space to show it on the top. I am not using the positioner function. I am having a reversed Y axis and the outside option set to true for the tooltip. This adds a scrollbar, whenever we hover on a point that is positioned near the bottom of the page.
Highcharts.chart('container', {
xAxis: {
categories: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'
],
},
yAxis: {
reversed: true
},
tooltip:{
outside:true,
useHTML:true,
padding:60,
},
series: [{
data: [
29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
95.6, 54.4
]
}]
});
Fiddle
Note: Please set the height of the viewport to 435px to observe this issue
3
Please try this,
tooltip:{
outside:false,
}
user23456366 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1