Plot Label overlapping Tooltip

[jbaran]

Hi,

I created a custom tooltip and custom chart labels. An example can be found here:
https://codesandbox.io/p/sandbox/highch ... 35c14a291a

How can I make the label stay behind the tooltip background?

[andrzej.b]

Hello jbaran,

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

The simplest solution would be to set the tooltip.outside property to true to keep the tooltip always outside of the chart's SVG element so you shouldn't face this problem on the other elements as well. Kindly refer to your updated demo: https://codesandbox.io/p/sandbox/highch ... ked-2zh5ft

API: https://api.highcharts.com/highcharts/tooltip.outside.

Let me know if this solution meets your requirements,
Kind Regards!

[jbaran]

Hi Andrzej,

Yeah, I've tried that however I'd also like to have tooltip displayed always within the chart.
If there is some simple solution to that it would be great, otherwise I'll probably go with the outside prop.

[andrzej.b]

Hi,
You can set a positioner to workaround it:

Code: Select all

tooltip: {
	...,
	positioner: function (labelWidth, labelHeight, point) {
        let x = point.plotX + this.chart.plotLeft - labelWidth / 2;
        let y = point.plotY + this.chart.plotTop - labelHeight - 10;

        const chartWidth = this.chart.plotWidth;
        const chartHeight = this.chart.plotHeight;

        if (x < this.chart.plotLeft) {
          x = this.chart.plotLeft;
        } else if (x + labelWidth > this.chart.plotLeft + chartWidth) {
          x = this.chart.plotLeft + chartWidth - labelWidth;
        }

        if (y < this.chart.plotTop) {
          y = point.plotY + this.chart.plotTop + 10;
        }

        return { x, y };
      },
}

Feel free to reach out if you have any further questions.

Kind regards,

[jbaran]

Hi,

Thanks a lot! It works just fine and fixes all my issues.