Tr335
Posts: 27
Joined: Tue Jun 28, 2022 9:31 am

Common x-axis for all charts with check box functionality intact

Please see the below link. Which adds one or more charts based on user selection using check boxes. Height of each chart is calculated based on how many checkboxes are checked and updated the height with the chart.update() method.
https://jsfiddle.net/BlackLabel/wtpkdL2z/

I would like to have a single x axis as shown in below links (instead of x-axis shown for each chart - as x-axis is same for all).
https://jsfiddle.net/qocgj03L/4/
https://jsfiddle.net/g2zpwL5n/

How to show x-axis data only once (at the bottom) with the above mentioned functionality intact (checkbox that allows user to select charts and height of charts that gets adjusted accordingly). Thank you.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Common x-axis for all charts with check box functionality intact

Hello,

As for now, the series your charts are not connected with each other. They are simply three separate charts in separate divs, and that causes some issues with achieving what you want.

First of all, the xAxis in all of your charts look different, even when using the same data. The distance between ticks will vary between series types.

You can try to rewrite your code to render 3 series in one chart. (3 yAxis, 1 xAxis) so then the charts can have a common xAxis that is linked to all of them.
You can write a custom JS logic, that will check how many charts are displayed on the page and will show the xAxis only on the last chart.
Or you can add a 4th chart to your code, with just a xAxis displayed in it, and conditionally show it if at least one checkbox is checked.

I hope that these solutions will inspire you to create a satisfying outcome,
Best regards!
Kamil Musiałowski
Highcharts Developer
Tr335
Posts: 27
Joined: Tue Jun 28, 2022 9:31 am

Re: Common x-axis for all charts with check box functionality intact

Please find the link: https://jsfiddle.net/wf946jdL/ . Now the x axis is common for all charts. And I have put all charts in one container instead of three. Earlier we used 'chart1' container for line chart, chart2 for column and chart3 for spline.

Can you help me with the following.
1) I want only first series (of three) to be shown on page load.
2) When toggled between charts using checkboxes, I would like the height of chart to be adjusted to predefined height, as mentioned earlier in my post. I have trouble toggling between charts since we have only one container now.
Previous working demo of height gets adjusted as per chart selection : https://jsfiddle.net/BlackLabel/wtpkdL2z/

Thank you.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Common x-axis for all charts with check box functionality intact

Hi there,

I have modified the demo you provided.

1) It is possible to display only one series at the beginning, just set the other ones to visible: false (you can of course do it programmatically to set a conditional series update based on the checkboxes checked).
2) I have implemented this logic in the demo, so you can study how the height and top values are calculated and updated on yAxis. Notice how we use the filter method on yAxis to omit the non-visible series and feel free to fine tune the values yourself.

Due to the performance reasons have also set the redraw property to false on setVisible and update method, so that we call it only one time, once all updates are ready.

DEMO: https://jsfiddle.net/BlackLabel/3dswfcnk/
Series visibility: https://api.highcharts.com/class-refere ... setVisible
Axis update: https://api.highcharts.com/class-refere ... xis#update
Chart redraw: https://api.highcharts.com/class-refere ... art#redraw

Let me know what you think about this solution, and do not hesitate to contact us with any further questions,
Have a great day!
Kamil Musiałowski
Highcharts Developer
Tr335
Posts: 27
Joined: Tue Jun 28, 2022 9:31 am

Re: Common x-axis for all charts with check box functionality intact

This is amazing. Exactly how I want the functionalities to be. Thanks a lot for your help. I appreciate it.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Common x-axis for all charts with check box functionality intact

That's so nice to hear that! I'm really glad that I could help you.

Don't forget that you are more then welcome to contact us anytime in the future,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”