How to place tooltip above point in highcharts x-range? - highcharts

Question

I have created highcharts x-range chart with multiple series in one category. Tooltips are displaying above the middle of the category. I'd like it to display above each x-range point. How can I do it?
I've tried to override tooltip positioner. But the argument point contains values plotX and plotY like it is placed on the middle of y value and I can't calculate its real position.
this.tooltipPositioner = function(labelWidth, labelHeight, point){
return {
x: point.plotX,
y: point.plotY
};
};
Live Demo: https://jsfiddle.net/levra/mh7uj93r/

Answer 1

You can use tooltip.positioner but instead of the argument point, you can use hovered point object where you will find the correct point plot values. To get hovered point object use plotOptions.series.point.events.mouseOver callback. Check the code and demo posted below:
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
JS:
var hoveredPoint;
var chart = Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
tooltip: {
positioner: function(labelWidth, labelHeight) {
var x = hoveredPoint.shapeArgs.x,
y = hoveredPoint.shapeArgs.y,
width = hoveredPoint.shapeArgs.width,
tooltipOffsetTop = -10;
return {
x: x + chart.plotLeft + width / 2 - labelWidth / 2,
y: y + chart.plotTop - labelHeight + tooltipOffsetTop
}
}
},
plotOptions: {
xrange: {
point: {
events: {
mouseOver: function() {
hoveredPoint = this;
},
mouseOut: function() {
hoveredPoint = null;
}
}
}
}
},
series: [{
name: 'Project 1',
// pointPadding: 0,
groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
},
{
name: 'Project 2',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 23),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}],
dataLabels: {
enabled: true
}
}
]
});
Demo:
https://jsfiddle.net/BlackLabel/51gybnew/1/