Andrii M
Posts: 2
Joined: Wed Sep 23, 2020 11:58 am

Synchronization of X-axes of charts of different types

Hi! I have the following situation: there are 2 separate charts, one is line and the other is column. They have a zoomType: 'x' property
and their X-axes are synchronized with setExtremes. The X-axis type is datetime.
Under certain conditions, immediately when displaying data on charts or after zooming, the x-axes are slightly out of sync.
The problem always arises with the column chart and it looks like a little extra time has been added to the displayed time range at the beginning and end of the range. I have attached a screenshot of such a case.
Apparently, this happens when a small amount of data is available in the displayed time range for the column chart.

The actual question is how to make the X-axis of the charts absolutely synchronized.

Image
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronization of X-axes of charts of different types

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

I can't see an image that you send, could you send it again?
For better understanding please prepare an example in the online code editor, here is a template for synchronized charts.
https://www.highcharts.com/demo/synchronized-charts

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
Andrii M
Posts: 2
Joined: Wed Sep 23, 2020 11:58 am

Re: Synchronization of X-axes of charts of different types

Thanks for the reply and sorry for the missing picture, it was displayed on the preview, but then it disappeared somewhere :)
I will try to prepare an example that reproduces the situation I encountered, as you requested.
In the meantime, here is my screenshot again, I hope it will be displayed and give a better understanding of this case.
Image
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Synchronization of X-axes of charts of different types

Hi,
Thanks for the detailed information and screen.

Try to set the same interval of tick marks on the axis of both charts units, it should help with this case.

API References:
https://api.highcharts.com/highcharts/x ... ckInterval

For custom tick positioning and for setting the position of tick if there was such a need.
https://api.highcharts.com/highcharts/x ... Positioner
https://api.highcharts.com/highcharts/x ... kPlacement

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”