rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Support for axis sharing among charts

1. We have a usecase where we display multiple charts in a 2D m x n grid-like display something like this https://jsfiddle.net/qdto49fa/1/ fiddle.
2. Now, we are trying to support ability of axis sharing among charts.
3. For example, all charts in column 0 will share common xAxis, i.e. only the bottom-most chart's xAxis labels should be shown and other charts in that column their xAxis ticks, tickIntervals, number of ticks, first tick and last tick should be exactly aligned with the bottom-most chart's xAxis. Now, these charts' xAxis label may or may not be shown, but ticks should be exactly aligned.
4. Not only that, it should be possible to share xAxes of adjacent charts. Here also, the second chart's xAxis ticks, ,tickIntervals, etc should be exactly aligned with first chart's xAxis.
5. Same for yAxes.

The decomposed version of above problem would be: Given two charts ch1 and ch2. Replicate tick properties of ch1's x/y axis and set them to ch2's x/y axis.

Note: We wouldn't like to use https://api.highcharts.com/highcharts/x ... kPositions because this will require us to peep into the given xData and pick suitable places depending on range to position the ticks.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Support for axis sharing among charts

Hello rdp1414!
We appreciate you reaching out to us!

What do you think about using common axes in one chart, without creating multiple charts? I think it is easier to add another series and assign them to others yAxes. If you set the same height of yAxes and the same max value, ticks will be in the same positions for all axes. xAxis will be common and shown only at the bottom of the chart. Please, check the demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/j7va0qws/

Let me know if that fits your requirements.
Kind regards!
Hubert Kozik
Highcharts Developer
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Support for axis sharing among charts

Although creating different panes within the same chart is simpler, you can also synchronize the axes of multiple charts. Take a look at our synchronized charts demo: https://www.highcharts.com/demo/synchronized-charts
Torstein Hønsi
CTO, Founder
Highsoft
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Support for axis sharing among charts

The above "synchronized-charts" demo shows how to synchronize separate charts in separate containers.

Here is another demo showing it (a simplified version of the above): https://jsfiddle.net/BlackLabel/1w06kr4h/
If there's still something that doesn't meet all your requirements, then could you reproduce and describe it? We might try a different approach if needed.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: Support for axis sharing among charts

[I think you must have got this update from Henrik; still posting it for the records. Analyzing previous reply]

There is need to show multiple separate charts in mxn grid and not in same chart. Few among many reasons are:
1. Different exported image for different charts in the grid.
2. Different title, subtitle, legend, etc for different charts in the grid.
3. Handlers/actions/ref on parent div container of different charts.

So, we want to share axes ticks (i.e. consistent tickPosiitons, tickIntervals, firstTick, etc) among mulltiple charts.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Support for axis sharing among charts

Yes, I got it from Henrik. Ok, let me know if anything is unclear in the above demo.
Here's the same demo with the exporting.js module added: https://jsfiddle.net/BlackLabel/fjq1vt7z/
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”