Sync zooming across diff axises

[Aarti]

Hi,

I am plotting two plots on same page.
one : range bar chart.
second : area chart.
Both these charts have same values on their horizontal axis.

I want to sync zooming and panning across horizontal axis.
Something like this: https://canvasjs.com/docs/charts/how-to/sync-across-multiple-charts/
But the problem is horizontal axis for range bar chart is Y-axis. While horizontal axis for area chart is X-axis.

If I am trying to sync two charts. Both X-axis gets synced with each other and both y-axis gets synced each other.
So with my case, horizontal axis of range bar chart gets synced with vertical axis of area chart and vice versa.

I want to sync both horizonatal axis( Y-axis of range bar chart with x-axis of area chart).

Please help me with the same.
Thanks

[Vishwas R]

Aarti,

You can achieve this by syncing axisX of range-bar chart with axisY of area chart and axisY of range-bar with axisX of area chart. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[Aarti]

Thanks, it worked