Home › forums › Feature Requests & Feedback › Share zoom level across multiple charts
Tagged: zoom across multiple charts
This topic contains 8 replies, has 6 voices, and was last updated by Sunil Urs 3 years ago.
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
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.
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.
You must be logged in to reply to this topic.