Sync pan and zoom across multiple charts

[hami-aryan]

This is more of a suggestion. It would be awesome to have the ability to sync pan / zoom across multiple charts! Dygraphs provides this...

[benmccann]

If each chart uses the same scale, you could do this by adding an onPan and onZoom that sets the min and max for each scale

[kylelawson6]

If this method were to be used, how would you get the new scale limits made from the zoom/pan, that would be used to set min/max?

UPDATE:
I figured it out. If anyone else is wondering how, the function called from onPan and onZoom will pass the panned/zoomed chart into it and you can access its new min and max for the scales via that. Done like so where myMovedChart is the panned/zoomed chart passed into the function:
myMovedChart.chart.options.scales...
And continue moving your way through the elements of the chart until you find the min/max of the scale you want.
Sorry if this is novice and not worth having posted!

[hodbauer]

UPDATE: ...

Thanks @kylelawson6 this idea is awesome, i tried it and it work like a charm

EDIT:
Another important think about that.
I have a complex situation that I'm zoom on multiple charts that also updated every X seconds and the x axis is time.
So, I want to reset all charts and it's not enough to call resetZoom in each of the charts, instead I init the min and max properties of the time scale when I'm recognize that user zoom out to the maximum of the chart.
And of course call chart.update().

[jledentu]

As @kylelawson6 and @hodbauer explained, I think that this feature can be implemented pretty easily outside of the plugin and shouldn't be added in the core of this plugin (it would add some complexity to handle groups of charts that are synchronized, I guess).
Nevertheless, we may add some documentation (README/wiki) to answer to this question and help future users that want to implement this? What do you think?

[tuxd]

I was trying to get this working with https://nagix.github.io/chartjs-plugin-streaming/ but you don't have access to min and max properties. Has anyone got a chart js streaming chart with zoom and pan synced to two charts?

[ewmailing]

Can you elaborate on how to do this technique? I tried the following which I found suggested in some other searches that turned up, but hit some bad corner case bugs.

For each of my chart, I implement the onZoomComplete callback. Here is the example for the chart1 callback.

	  onZoomComplete: function(the_chart1) {
		  g_chart2.options.scales.x.min = the_chart1.chart.options.scales.x.min;
		  g_chart2.options.scales.x.max = the_chart1.chart.options.scales.x.max;
		  g_chart2.update();
         }

I also implemented a button that will call resetZoom() for every chart.

This works in the most basic usage, but the bug is as follows:

1. Drag-zoom some area in chart 1. (Both charts will zoom correctly.)
2. Then drag-zoom some area in chart 2. (Both charts will zoom again.)
3. Then hit the reset button to call resetZoom() on both charts.

In step 3, the charts do not reset correctly. It looks like the reset zoomed back to the value in step 2, instead of the original state. As far as I can tell, the original starting state gets lost if you switch between graphs to zoom. I cannot figure out how to get back to the original starting state.

I'm wondering if there was a different technique I was supposed to implement as described in this thread, or if this is exactly what was described. If the latter, then there is bug with this technique.

[daviddeutsch]

It took me a good while to get this right. The biggest thing that threw me was that the only way to get consistent scaling is to set chart.options.scales.x.min and chart.options.scales.x.min, but that changes the output of chart.getInitialScaleBounds()! So in my solution, I just store the initial scaling for later reference:

function syncCharts(chart) {
	const sourceChart = chart.chart;

	if (typeof sourceChart.initial === 'undefined') {
		sourceChart.initial = sourceChart.getInitialScaleBounds();
	}

	const sourceInitialBounds = sourceChart.initial;

	const sourceXrange = Math.abs(sourceInitialBounds.x.max) + Math.abs(sourceInitialBounds.x.min);
	const sourceXscaleMin = (sourceChart.scales.x.min - sourceInitialBounds.x.min) / sourceXrange;
	const sourceXscaleMax = (sourceChart.scales.x.max - sourceInitialBounds.x.max) / sourceXrange;

	const sourceYrange = Math.abs(sourceInitialBounds.y.max) + Math.abs(sourceInitialBounds.y.min);
	const sourceYscaleMin = (sourceChart.scales.y.min - sourceInitialBounds.y.min) / sourceYrange;
	const sourceYscaleMax = (sourceChart.scales.y.max - sourceInitialBounds.y.max) / sourceYrange;

	Object.values(Chart.instances).forEach(targetChart => {
		if (targetChart !== chart.chart) {
			if (typeof targetChart.initial === 'undefined') {
				targetChart.initial = targetChart.getInitialScaleBounds();
			}

			const targetInitialBounds = targetChart.initial;

			const targetXrange = Math.abs(targetInitialBounds.x.max) + Math.abs(targetInitialBounds.x.min);
			targetChart.options.scales.x.min = targetInitialBounds.x.min + targetXrange * sourceXscaleMin;
			targetChart.options.scales.x.max = targetInitialBounds.x.max + targetXrange * sourceXscaleMax;

			const targetYrange = Math.abs(targetInitialBounds.y.max) + Math.abs(targetInitialBounds.y.min);
			targetChart.options.scales.y.min = targetInitialBounds.y.min + targetYrange * sourceYscaleMin;
			targetChart.options.scales.y.max = targetInitialBounds.y.max + targetYrange * sourceYscaleMax;

			targetChart.update();
		}
	});
}

and then add this function to both pan and zoom in the config:

{
	zoom: {
		zoom: {
			mode: 'xy',
				onZoomComplete: syncCharts
		},
		pan: {
			enabled: true,
				onPanComplete: syncCharts
		}
	}
}

This works great for syncing all charts, but I also had a reset function that would now go haywire, so this function resets all available charts:

function resetCharts() {
	Object.values(Chart.instances).forEach(targetChart => {
		if (targetChart !== chart.chart) {
			if (typeof targetChart.initial === 'undefined') {
				targetChart.initial = targetChart.getInitialScaleBounds();
			}

			const targetInitialBounds = targetChart.initial;

			targetChart.options.scales.x.min = targetInitialBounds.x.min;
			targetChart.options.scales.x.max = targetInitialBounds.x.max;

			targetChart.options.scales.y.min = targetInitialBounds.y.min;
			targetChart.options.scales.y.max = targetInitialBounds.y.max;

			targetChart.update();
		}
	});
}

It'd be great if chart.getInitialScaleBounds() was more intuitive.