Home Forums Feature Requests & Feedback Share zoom level across multiple charts

Share zoom level across multiple charts

Viewing 9 posts - 1 through 9 (of 9 total)
  • #4852


    I have many charts on one page. Is there a way to zoom in on any one of them and the zoom level effect the other charts on the page? I would like to “link” the zoom levels together.




    Now we have a Tutorial on Syncing Zoom / Pan across Multiple Charts.

    Sorry, this features is not available as of now. But I’ll consider it for a future version.


    Is there a plan to support this feature?



    If this feature will not be implemented in the near future, it would also be ok if CanvasJS can expose a API to zoom in/out certain x axis range of a chart, plus a Api to tell the current x axis display range. I can write code to synchronize the zoom in/out across different charts.

    I am currently considering transfering from a different charting to CanvasJS, but this feature is a blocker. It would be nice if you can help work around it.



    An API would to allow us to zoom across multiple charts would be perfect. I will watch this topic to see if it makes it into a plan for a future release.


    +1 vote for this

    • This reply was modified 9 years, 9 months ago by adamwinn.

    I want to create a new post but unfortunately I cant seem to figure out a way to do so on this Forum (I just registered so maybe it’ll take time before I can post?).

    We have similar requirement and modified CanvasJS to have time aligned x-axis with linked-zoom across multiple charts. Unfortunately charts don’t line up always due to the fact that the y-axis keeps shifting left or right depending on the axis label width.

    For example, I have two charts that have data collected at the same time – chart 1 has range 0 – 10 seconds and chart 2 has range 0 – 20 seconds. I want to align these two charts with the time on the x-axis. But when I zoom into, say, 15 – 17 seconds, the first chart gets no y-axis labels and CanvasJS shifts the vertical y-axis line and now my charts aren’t aligned anymore.

    Do you have any plans to support this feature or is there a better way to fix the position of the y-axis? To see what I am talking about change the datapoints y-value at https://canvasjs.com/docs/charts/chart-options/axisx/labelwrap/ to some huge number and see the vertical line shift right. I tried playing with margin, labelMaxWidth, and font “monospace” but can’t get it to work.



    As of now we are considering to implement zooming API & events (which would support syncing range across charts) in either v1.8 or v1.9. But haven’t decided on it yet. A rough estimate as of now would be 2-3 months.

    When it comes to aligning axisY’s line, only workaround that I see as of now would be to Zero pad the Y Axis labels by setting valueFormatString of axisY to something like “#,000.##” and set appropriate intervals.

    Sunil Urs



    Now we have a Tutorial on Syncing Zoom / Pan across Multiple Charts.


    We have just released v1.8.0 Beta which supports Syncing Multiple Chart Ranges, Vertical Zooming & Controlling Pie/Doughnut Radius. Please refer to the release blog for more information.

    Sunil Urs

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.