Extend onZoom and onPan callbacks for syncing multiple charts

[vbackeberg]

Purpose

onZoom and onPan callbacks now return additional data that is useful for syncing multiple charts.

Changes

• onZoom returns the amount it zoomed.
• onPan returns the delta it panned.

These values can be used to zoom/pan other charts by the same amount. The values are basically piped through from the function args, so there is no additional computation.

• pan() receives a new PanTrigger parameter.

It can be used in the spirit of ZoomTrigger to distinguish between "api" and user interactions. This is required to pan other charts when the user pans, but not trigger a loop through the subsequent programmatic calls to pan().

Example

function createChart(chart:Chart, chartElement: HTMLCanvasElement) {
  chart = new Chart(chartElement.getContext('2d')!, {
    type: 'line',
    data: { datasets: items },
    options: {
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: 'x',
            onPan: ({ chart, delta, trigger }) => {
              if (trigger === 'api') return;
              Object.values(Chart.instances).forEach((c) => {
                if (c.id !== chart.id) {
                  c.pan({ x: delta.x });
                }
              });
            }
          },
          zoom: {
            wheel: { enabled: true },
            mode: 'xy',
            onZoom: ({ chart, amount, trigger }) => {
              if (trigger === 'api' || amount === undefined) return;
              Object.values(Chart.instances).forEach((c) => {
                if (c.id !== chart.id) {
                  c.zoom(amount);
                }
              });
            }
          },
        },
      },
    }
  });
}

Background

So far there is no good way to sync zoom and pan across multiple charts that I could come up with or have found during my research.

The only approach I found was this from 2019: https://github.com/chartjs/chartjs-plugin-zoom/issues/238#issuecomment-2002819777

The changes I propose solve the issue of syncing multiple charts in a simple way while not breaking anything. I think it would be a good addition to the library that could help many others.

[stsrki]

I have just noticed this PR, and it is just the feature that is perfect for our use case, too. https://github.com/Megabit/Blazorise/pull/6109

Questions for maintainers. Is there any chance this could be merged soon? Thanks.

[vbackeberg]

I simplified the amount return value a bit, since there was some obsolete actualAmount calculation before, and squashed the commits. Now it is pretty plain simple.

We are using it and so far works very well. :)

devs, let me know if I need to do anything.

[stsrki]

@kurkle, apologies for the direct mention. I just wanted to check if this PR looks good to merge.

Thanks!

[technyon]

Hi. Any update on this? Merging this would be very appreciated.

[technyon]

Hi,

we'd really need this functionality. Would it be possible to review and merge it? Looking at the diff, it's only 8 lines that have been updated.