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

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:
How to position highcharts tooltip above chart with outside:true
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!"