jbaran
Posts: 6
Joined: Mon Nov 04, 2024 9:52 am

Plot Label overlapping Tooltip

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
Site Moderator
Posts: 307
Joined: Mon Jul 15, 2024 12:34 pm

Re: Plot Label overlapping Tooltip

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!
Andrzej
Highcharts Developer
jbaran
Posts: 6
Joined: Mon Nov 04, 2024 9:52 am

Re: Plot Label overlapping Tooltip

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
Site Moderator
Posts: 307
Joined: Mon Jul 15, 2024 12:34 pm

Re: Plot Label overlapping Tooltip

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,
Andrzej
Highcharts Developer
jbaran
Posts: 6
Joined: Mon Nov 04, 2024 9:52 am

Re: Plot Label overlapping Tooltip

Hi,

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

Return to “Highcharts Stock”