annananana
Posts: 34
Joined: Wed Feb 03, 2021 11:27 pm

Control tooltip position to be the left/right of the point

Hi,

I want to control the tooltip position and always put it on the left of the crosshair as long as it doesn't go out of the chart. But if the tooltip is going to be out of the chart, show it on the right side of the crosshair. (BTW, the reason behind this requirement is I found that if the tooltip is covering the crosshair, the experience is not smooth if I want to drag the point up and down, or zoom in the chart.)

I know there is https://api.highcharts.com/highcharts/t ... positioner callback function that I can use to control tooltip position. But I have some problems with it.

Here is a demo I'm currently working on: https://jsfiddle.net/nexqk3tw/33/. The problem happens if I want to enable scrollablePlotArea, the positioner would perform weird. (BTW, I want scrollablePlotArea to be enabled because I want to support large data use case, but don't want to show all the data points on the chart. Otherwise, the data points would look compressed visually, which I don't want.) In that demo, when you scroll to the right of the chart, you will find that the tooltip would be positioned far away from the chart. The reason I suspect is because point.plotX is still referring to the point position in the real chart, instead of the chart container.

Is there any solution that can solve my requirement that `always put it on the left of the crosshair as long as it doesn't go out of the chart. But if the tooltip is going to be out of the chart, show it on the right side of the crosshair` even with scrollablePlotArea enabled.

Thanks!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Control tooltip position to be the left/right of the point

Hello annananana!

We appreciate you reaching out to us!

We can use this.chart.scrollingContainer.scrollLeft to get a proper position. Check it out: https://jsfiddle.net/BlackLabel/L9jw61bo/

Best regards!
Dominik Chudy
Highcharts Developer
annananana
Posts: 34
Joined: Wed Feb 03, 2021 11:27 pm

Re: Control tooltip position to be the left/right of the point

Hi,

Thanks for the solution. It works fine!

One follow up question is I got his warning
Property 'scrollingContainer' does not exist on type 'Chart'.
because I'm using typescript in my project. Is there any way to mitigate this warning? One thing I can think about is maybe extend the original chart object with scrollingContainer.scrollLeft. But still want to get some official suggestion if there is.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Control tooltip position to be the left/right of the point

Hi again!

In this case, I suggest reading our docs here: https://www.highcharts.com/docs/advance ... typescript

Basically, you need to write an interface or add as any in a place where you have an error.

Best regards!
Dominik Chudy
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: Control tooltip position to be the left/right of the point

I am getting an error at this line:
var plotX = point.plotX - this.chart.scrollingContainer.scrollLeft;


ERROR TypeError: Cannot read properties of undefined (reading 'scrollLeft')
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Control tooltip position to be the left/right of the point

Hi Zolotoy!
Thanks for contacting us with your question.

It is hard to tell you what is not working and what could be done without taking look at your code. Could you reproduce the issue in an online editor that I could work on? You can start here:
https://jsfiddle.net/BlackLabel/j5v2hzs0/

Regards!
Hubert Kozik
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: Control tooltip position to be the left/right of the point

I can't. I am using an organization chart. Does that matter?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Control tooltip position to be the left/right of the point

Zolotoy,

Maybe you are not using a chart.scrollablePlotArea property and chart.scrollingContainer doesn't exist. If don't want to use chart.scrollablePlotArea you can modify the logic to show a tooltip always on right and when there won't be a place for it it will change the position to left like in the demo below.

Demo with chart.scrollablePlotArea: https://jsfiddle.net/BlackLabel/tfck5pgu/
Demo without chart.scrollablePlotArea: https://jsfiddle.net/BlackLabel/q7td9rpa/
API Reference: https://api.highcharts.com/highcharts/c ... lePlotArea

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: Control tooltip position to be the left/right of the point

I see, thanks. Is there a chance the tooltip would appear always at the same y coordinate regardless of a mouse position while hovering over the node? also, how can access a node that I am currently hovering over in the positioner callback?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Control tooltip position to be the left/right of the point

Zolotoy, you're welcome!
You can change the returned y value in tooltip.positioner callback function to constant.

Demo: https://jsfiddle.net/BlackLabel/d5qem72x/
API Reference: https://api.highcharts.com/highcharts/t ... positioner

Feel free to ask any further questions!
Hubert Kozik
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: Control tooltip position to be the left/right of the point

<You can change the returned y value in tooltip.positioner callback function to constant.
That is not what I was asking. I need to have a tooltip at the same but relative to a node position regardless of what part of the node I am hovering over. Having access to the node itself would solve that problem because I could do something like this:
node.graphic.getBBox(). and access node's position.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Control tooltip position to be the left/right of the point

Zolotoy,
I apologize for the misunderstanding. To find the actual hovered Point instance, use this.chart.hoverPoint object and then you can use a getBBox() method or use a shapeArgs like in the demo below. You can read more about this in the documentation.

Demo: https://jsfiddle.net/BlackLabel/oh3vy17k/
API Reference: https://api.highcharts.com/highcharts/t ... positioner

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: Control tooltip position to be the left/right of the point

Seems what I need, thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Control tooltip position to be the left/right of the point

You're welcome! Feel free to contact us again!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”