0
votes

Hot to always position the tooltip on top of the point?

Is there a way to position the Highcharts tooltip always on top of the hovered point? I tried using the tooltip > positioner to fix the position, but if the point in on the edge of chart then the tooltip gets cut.

positioner: function(labelWidth, labelHeight, point) {
    var tooltipX = point.plotX + 20;
    var tooltipY = point.plotY - 30;
    return {
        x: tooltipX,
        y: tooltipY
    };
}

1. Without the positioner block :

enter image description here

2. With the positioner block :

enter image description here

3. Expected result in all cases :

enter image description here

1

1 Answers

0
votes

You can wrap the getPosition method and recalculate the tooltip position:

var H = Highcharts;

H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
    var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    if (result.y > point.plotY) {
        result.y = result.y + (point.plotY - result.y);
    }
    return result;
});

Live demo: http://jsfiddle.net/BlackLabel/156nydh4/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts