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?

Answer 1

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