Disable tooltip on Gantt chart if the dataLabel overflows

[LucasNRamos]

Hi everybody!

I'm working with Highcharts in a Angular 14 application. I'm trying to figure out a way (if possible) to disable tooltips on mouse hover when the dataLabel is bigger than the chart point, like the image below



I've tried looking into the mouseOver event on the point, trying to trigger preventDefault() if the cursor is hovering the 'overflow' datalabel and not the gantt point, but was not successfull.
Any help or ideas are appreciated.

We've highly configured Highcharts in this application and thus far I couldn't setup a Stackblitz replication of our setup. I'll update this post if I manage to do so.

Thanks

[LucasNRamos]

Here's a working example in Stackblitz
https://angular-fpkid2.stackblitz.io

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

Unfortunately, I was not able to run your angular demo but I took your code and put in in jsFiddle.

I prepared a custom solution for you when on every chart rerender I check if the label is bigger than the point and depending on that I toggle a custom property on a point called shouldShowTooltip.
Than, in tooltip.formatter I check if the property on the point is true or false and based on that I render or disable the tooltip, see:

Demo: https://jsfiddle.net/BlackLabel/brv7ew4p/

Let me know if that was what you were looking for!
Best regards
Jakub