How to make the position of shared tooltip be above the points?

Question

I found a lot of answers for this question, but no one fit mine. So, we can see that regular tooltip is located above the point, like in this picture:

And when I change this example to use shared:true, the tooltip located in the left side:

Now I just want that shared tooltip will be located above the 2 points(in the example). I know that I need to add code in the property positioner, but I cant figure out the math. more than that, if outside: true than I absolutely can't understand the math.

So, to conclude, how to make the position in shared tooltip to be above the points? Thanks in advance.

Answer 1

Ok, it's really annoying task! So I give a solution for shared tooltip and outside: true. So first problem was to understand the coordinates system. When outside: true we work relative to window, and when outside: false we work relative to chart.

Second, you can see if you put a log, that point values are always relative to chart, so what to do when we do outside: true?

Here the code which worked for me:

  outside: true,
  positioner: function(labelWidth, labelHeight, point) {
    const chart = this.chart;
    const chartPosition = chart.pointer.getChartPosition();
    const hoverPoints = chart.hoverPoints;
    const highestPoint = [...hoverPoints].sort((a, b) => a.plotY - b.plotY)[0];
    const middlePoint = hoverPoints[Math.floor(hoverPoints.length / 2)];

    return {
      x:
        chartPosition.left +
        middlePoint.barX +
        chart.plotLeft +
        middlePoint.pointWidth / 2 -
        labelWidth / 2,
      y: chartPosition.top + highestPoint.plotY - labelHeight
    };
  },

I used a little the solutions from:

1. How to position highcharts tooltip above chart with outside:true
2. Highcharts custom tooltip positioner

To a little bit explain my solution, i share a picture:

Till now I'm not 100% understand what exactly each property say, but it's the way.

To investigate further, I suggest you to put a lot of console.logs on the properties, and also I used this code pasted to Console in devtools:

addEventListener('click', (event) => {
  console.log(`x: ${event.clientX}, y: ${event.clientY}`);
})

It helped me to create a target, for example: "The middle need to be in x:250 and y:300 because I clicked on the middle and got this values => let's play with the properties to get closer as I can!"