Position shared tooltip above the stacked columns

Question

When using stacked columns, I would like the tooltip to be positioned above the stacked columns. Right now, the tooltip will appear above the hovered part of the column, like this:

I would like the tooltip to always appear above the stacked columns regardless of the hovered part, like this:

I know about the positioner method, but this function doesn't seem to receive the proper parameters for me to position the tooltip above the stacked columns. In particular I don't know how to properly get the coordinates of the hovered column, all I get is the global position of the cursor.

Answer 1

You can use the shared parameter for a tooltip:

tooltip: {
    shared: true
}

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

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

Answer 2

So I finally managed to do it using Axis.toValue() and Axis.toPixels() values:

https://api.highcharts.com/class-reference/Highcharts.Axis

For my solution to work you need to have a way to get the total value of a stacked column. There may be a way to do it using only the Highcharts object, but I don't like messing too much with the internals of Highcharts for compatibility reasons.

Here's what the positioner method could look like:

function positioner(labelWidth, labelHeight, point)
{
    // Default position, assuming mChart is the Highcharts object
    var chartY = point.plotY + mChart.plotTop;
    var chartX = point.plotX + mChart.plotLeft;

    // Move chartY above the stacked column, assuming getTotalColumnValue() exists
    var category = Math.round(mChart.xAxis[0].toValue(point.plotX, true));

    if(category in mChart.xAxis[0]['categories'])
        chartY = mChart.yAxis[0].toPixels(getTotalColumnValue(category), false);

    // Move tooltip above the point, centered horizontally
    return {
        x: chartX - labelWidth / 2,
        y: chartY - labelHeight - 10,
    };
}