In v1.8 you can Sync multiple chart ranges, zoom vertically and control Pie/Doughnut Chart size

Posted on

Ability to sync multiple chart ranges has been one of the popular requests since last couple of months and hence we decided to implement the same. Along with sync we have also added feature to allow vertical zooming/panning. These two features should allow you to create more advanced dashboards and also improve the user experience. Below is a summary of this release.

Animated HTML5 JavaScript Charts

New Features & Properties

  1. Vertical Zooming by using zoomType: (“x” | “y” | “xy”)
  2. Zooming & Panning programmatically using viewportMinimum & viewportMaximum
  3. rangeChanging & rangeChanged events to notify change in range while panning/zooming (using mouse or touch). Using this event along with viewportMinimum & viewportMaximum you’ll be able to sync range of multiple charts as shown in this example.
  4. Controlling Doughnut/Pie size using radius and innerRadius

Synching Charts

Using rangeChanging/rangeChanged events along with viewportMinimum & viewportMaximum you’ll be able to sync range of multiple charts as shown in below examples.

  1. Syncing X Axis Range of two Charts
  2. Syncing both X & Y Axis Range of two Charts

In coming months we’ll be improving chart axis with more power packed features. So do check out these features and let us know your feedback.

Thank You,
Sunil Urs
Team CanvasJS

Comments 11

  1. Hey,

    There is a bug, which can be tested in both “Synching Charts”-examples.
    When you zoom into the first diagram, both diagrams are zoomed.
    But when you click “reset” in the second diagram, only the second diagram is reset. The first one is still zoomed.

    It works, if you perform both actions in the same diagram.

    Would be nice, when you can take a look.

    Best regards

  2. Hi Sunil,

    If it is doable, it would be great to also synch data point highlighting.
    We have for example two scatter charts next to each other, where one chart shows the location of an object and the other one measurements.
    I looked to programatically highlight a corresponding datapoint in the other chart when hovering over that one, but I failed.
    Do you know if that is already possible somehow?


    • Christian,

      As of now it’s not possible.
      Thanks for your suggestion. It’s in our road-map but we don’t have a fixed timeline yet.

  3. Pingback: Feature Roundup - All Major Updates in CanvasJS Charts - CanvasJS

  4. Hi! Someone in my Facebook group shared this skte with us so I came to give it a look.
    I’m definitely enjoying the information. I’m book-marking and willl
    be tweeting this to my followers! Superb blog and wonderful design.

  5. When I zoom in one of the charts, second is not zooms.
    When I reset zoom in one of them, both are reset. How to fix this problem?
    Would I post screenshot , but I can’t :(

      • Aparus,

        Thanks for pointing this out.

        As we added multiple axis support in v1.9.5 , all axis parameters in events like rangeChanging / rangeChanged have been changed to array from object. And we have missed out updating this jsfiddle, which we did now.

Leave a Reply

Your email address will not be published. Required fields are marked *