Highcharts tooltip arrow position

Question

I'm trying to modify the Highcharts tooltip for a stacked column graph so that the little arrow on the tooltip points to the middle of the bar. I know I can use the positioner callback to change the position of the tooltip but it seems like the arrow always points to the top of the bar no matter what its position is. See my fiddle for what I mean: http://jsfiddle.net/4dy46vfx/1/.

Below is a crude screenshot of what I'm after:

Is there any way to change the position of the tooltip arrow?

I don't get it. In the Fiddle the Arrow always points at the middle of the Bar. What do you want to accomplish? — Martin Schneider
Thanks for fiddle, but let us know how it should be printed, please prepare a mockups — Sebastian Bochan
So you need to move tooltip lower? Your screenshot is mockup how it should be printed or how is? — Sebastian Bochan

ppotaczek ppotaczek · Accepted Answer · 2019-06-13T13:44:43

With disabled tooltip.animation property, you can calculate anchorY in a wrap of updatePosition method:

(function(H) {
    H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, point) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.label.attr({
            anchorY: point.plotY + point.h / 2 + this.chart.plotTop
        });
    });
}(Highcharts));

Live demo: http://jsfiddle.net/BlackLabel/91tfrL45/

With the animation enabled, it is necessary to override that method:

Highcharts.Tooltip.prototype.updatePosition = function(point) {
    var chart = this.chart,
        label = this.getLabel(),
        pos = (this.options.positioner || this.getPosition).call(
            this,
            label.width,
            label.height,
            point
        ),
        anchorX = point.plotX + chart.plotLeft,
        anchorY = point.plotY + point.h / 2 + chart.plotTop,
        pad;

    // Set the renderer size dynamically to prevent document size to change
    if (this.outside) {
        pad = (this.options.borderWidth || 0) + 2 * this.distance;
        this.renderer.setSize(
            label.width + pad,
            label.height + pad,
            false
        );
        anchorX += chart.pointer.chartPosition.left - pos.x;
        anchorY += chart.pointer.chartPosition.top - pos.y;
    }

    // do the move
    this.move(
        Math.round(pos.x),
        Math.round(pos.y || 0), // can be undefined (#3977)
        anchorX,
        anchorY
    );
}

Live demo: http://jsfiddle.net/BlackLabel/w1qomy0x/

API Reference: https://api.highcharts.com/highcharts/tooltip.animation

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

Highcharts tooltip arrow position

1 Answers