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