I have a bar-style high chart for which I am trying to position its tooltip to come on the left-hand side when hovering on the bar. Instead, the tooltip is coming over the bar on hover.
I want to make this positioning dynamic instead of hardcoded. I also want to add an arrow along the border of the tooltip to point to the right bar data from which the tooltip is originating.
Sharing the minimum code snippet that I have tried so far (due to code restrictions sharing policy):
tooltip: {
useHTML: true,
headerFormat: `<strong ></strong><table>`,
formatter: function () {
var result = "<strong >" + obj.getname() + "</strong><table>";
for (var i = 0; i < placementTypeSeries.length; i++) {
var point = placementTypeSeries[i];
var name = point.name && point.name[0] ? point.name[0] : "N/A";
var data =
point.data && point.data[0] !== undefined
? point.data[0]
: "N/A";
let normalizedDataValue =
((data !== "N/A" ? data : 0) * 95) / maxDataValue;
var color = point.color ? point.color : this.series.color;
result +=
'<tr><td style="color:black;">' +
name +
" </td>";
result +=
'<td style="padding:0 2px"><span style="border-radius:2px;height:18px; vertical-align:middle; margin:3px; display:inline-block; width:' +
normalizedDataValue +
"px; background-color:" +
color +
';"></span></td>';
result += '<td style="padding:0"><b>' + data + "</b></td></tr>";
}
return result;
},
footerFormat: "</table>",
shared: true,
positioner: function (labelWidth, labelHeight, point) {
console.log({ labelWidth, labelHeight, point });
return { x: 0, y: 0 }
},
followPointer: false,
}
This is how currently it looks like:
The console.log() for point outputs plotX, plotY, which I tried to use like this:
return { x: point.plotX, y: 0 }
But that is also not working.
This is how I want my tooltip arrow to look something like this:
I have tried all possible highchart properties and followed other existing examples but those are also not working. If anyone can help to provide the fix for this?
Thanks in advance!