Axis Alignment and Tooltip Issues with Highcharts Stock Scroll

[Satyam7Jha]

Description When implementing the Highcharts/Stock scroll feature, two main issues are occurring:

The y-axis is not aligning and displaying properly. Unwanted tooltips are appearing at the bottom of columns for the axis.

Expected Behavior (non highchart/stock)

The axis should be properly aligned and visible. Only the default tooltip (as seen in the non-stock version) should be displayed.

Current Behavior with highchart/stock

https://github.com/user-attachments/assets/b8c0128f-42e8-44e0-a583-927d1a44cf97

The y-axis is misaligned and not displaying correctly with Stock scroll enabled. Additional, unwanted tooltips are appearing at the bottom of columns for the axis.

Code-sandbox: https://codesandbox.io/p/github/Satyam7Jha/visualization/main?import=true&embed=1&showConsole=true

[KamilKubik]

Hello @Satyam7Jha,

Thanks for contacting us again!

According to the wrong y-axis labels display, the issue occurs because of the offset set by the yAxis.labels.x property set to 20 in your configuration. You can test it by decreasing this value as the labels are moved to the right. I assume the property should be removed to meet your requirements.

The second (bottom) tooltip is a default stock charts feature that in your implementation shows the x-axis values. You can disable it by setting the tooltip.headerFormat property to undefined or an empty string.

Here's your demo updated with the above changes.

Kind Regards!

[Satyam7Jha]

@KamilKubik Could you please make the demo link public? Thank you. Also, there's an issue with the axis: the last y-axis label is misplaced in the top left corner of the chart.

[KamilKubik]

@Satyam7Jha I created a new branch when I added the changes. It's created based on your public project, so it should be publicly accessible (I also tested it on different devices). Kindly refer to the shared button copied link demo, and the one directly from the URL: https://codesandbox.io/p/github/Satyam7Jha/visualization/csb-lznykg/draft/laughing-pond?embed=1&import=true&showConsole=true.

Also, I can't fork this project into my team. Could you share the Codesandbox error if you're still unable to open it?

According to the mispositioned y-axis label, the last y-axis label is hidden by default so it's not positioned properly/visible. You can adjust its visibility using the yAxis.showLastLabel property (as you can see it's undefined by default). I set it to true in the above demo (the problem shouldn't occur). Nevertheless, if you'd like to keep it hidden, I can see it renders beyond the viewport in some cases, but without any unwanted effect to the layout. Feel free to let me know if you face any difficulties with that.

Let me know how the above works for you, Kind Regards!