Horizontally Synced Cursors for Multiple Y-Axis Tooltips

[jeinhorn787]

Question

I need to sync cursors across multiple charts laid out horizontally to render a tooltip on each chart on the Y-axis. When the user hovers their mouse on 1 chart, a tooltip shows as well as tooltips on the other charts in the same position on their respective charts.

I understand that using syncWith only tracks the XY position of the cursor on screen and NOT by axis position as outlined in the docs and therefore, the cursors will not sync when tracking a cursor on the Y axis with horizontally laid out charts.

Is there any other way you can suggest to achieve this? Below is a codepen that is actually a copy of the codepen in your docs but I altered it to render the charts horizontally to show a very similar setup I will have in my project.

https://codepen.io/jeinhorn787/pen/RwXPRMe

Visual description of what I need

Environment (if applicable)

Version: @amCharts5: "^5.8.7" Browser: Chrome (129.0.6668.60) Framework: React

[martynasma]

The solution would involve:

1) Adding cursormoved event to all cursors. 2) Simulating move of teh cursor to the same local x/y position.

Here's a modified pen: https://codepen.io/team/amcharts/pen/XWvbMOx?editors=0010

[jeinhorn787]

Here's a modified pen: https://codepen.io/team/amcharts/pen/XWvbMOx?editors=0010

This is on the right track but it is unstable. In the screen recording below, I am moving the cursor very slightly across the bullet point and the other tooltips flicker erratically.

https://github.com/user-attachments/assets/e45a82c2-e6e0-4c6b-8e3e-27a12c0f0632

[martynasma]

Indeed. CodePen updated.

[jeinhorn787]

Indeed. CodePen updated.

Sweeeeeet, works well. Thanks so much!!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.