co-zooming multiple charts when one graph zoomed in/out

[sarabjeet1313]

I have multiple different charts on a page and I am wondering if there is a way to zoom (using mouse hover) all of them together programmatically, if one of them is zoom in or out.

I have time-stamps in x-axis coming at runtime and integers on y-axis coming at rum time.

[stockiNail]

@sarabjeet1313 have a look to the codepen: https://codepen.io/stockinail/pen/dymEqQG

Zooming on the chart on the left, the zoom is propagated to the chart on the right.

Additional code is needed if you want to zoom on whatever chart and to propagate to the others but maybe it's a good starting point.

[sarabjeet1313]

Thanks @stockiNail,
can we somehow make use of onZoomComplete()?

I am looking for the updated x:min and x:max values which I can set in Angular service class and then from there it will be propagated to all the other charts.
But not sure, how can I fetch the updated x axis range and then how to set the same to the other graphs programmatically.

[stockiNail]

can we somehow make use of onZoomComplete()?

Here is the codepen with onZoomComplete: https://codepen.io/stockinail/pen/YzaowZz

But not sure, how can I fetch the updated x axis range and then how to set the same to the other graphs programmatically.

You should change min and max in chart.options.scales.x and then perform a chart update.

[sarabjeet1313]

Great, thanks @stockiNail. Just one last question, can we attach any unique identifier to different charts so that I can skip some specific charts from the common update operation?

I am using this hack "c.options.plugins.title.text == 'Dummy'", just wondering if we actually have something more rigid.

[stockiNail]

@sarabjeet1313 sorry for my delay on answering you. I can add a property (whatever you want) to chart options object:

I have updated the codepen (https://codepen.io/stockinail/pen/YzaowZz) adding a third chart which is not propagating/ receiving the zoom to the others.

const ctx1 = document.getElementById('myChart1');
new Chart(ctx1, {
  type: 'line',
  data: {
    datasets:[
	  ds1
	]
  },
  options: {
    ...options,
    commonUpdate: true
  }
});

const ctx2 = document.getElementById('myChart2');
new Chart(ctx2, {
  type: 'line',
  data: {
    datasets:[
	  ds2
	]
  },
  options: {
    ...options,
    commonUpdate: false
  }
});