Zoom & Pan on GeoChart (or potentially any chart type)

[brunolm]

Here's my workaround, I believe something similar could be integrated with the package to provide zoom/pan as a built-in feature.

const DomMatrix = window.DOMMatrix || window.WebKitCSSMatrix || window.MSCSSMatrix;

const preventDefault = (e) => e.preventDefault();

const pan = ({ element, scale, offsetX, offsetY }) => {
  const matrix = new DomMatrix(element.style.transform);
  element.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${matrix.e - offsetX}, ${matrix.f - offsetY})`;
};

const onMouseDownSymbol = Symbol('onMouseDown');

// map: `g` tag inside svg
const mapElement = container.querySelector('svg g[clip-path]');

  if (window[onMouseDownSymbol]) {
    container.removeEventListener('mousedown', window[onMouseDownSymbol]);
  }

  window[onMouseDownSymbol] = (event) => {
    if (event.button !== 0 && event.button !== 2) {
      return;
    }

    let previousClientX = event.clientX;
    let previousClientY = event.clientY;

    const onMouseMove = (moveEvent) => {
      pan({
        element: mapElement,
        scale: zoom,
        offsetX: previousClientX - moveEvent.clientX,
        offsetY: previousClientY - moveEvent.clientY,
      });
      previousClientX = moveEvent.clientX;
      previousClientY = moveEvent.clientY;
      moveEvent.preventDefault();
    };

    const onMouseUp = () => {
      container.removeEventListener('mouseup', onMouseUp);
      container.removeEventListener('mousemove', onMouseMove);
      container.removeEventListener('contextmenu', preventDefault);
    };

    container.addEventListener('mouseup', onMouseUp);
    container.addEventListener('mousemove', onMouseMove);
    container.addEventListener('contextmenu', preventDefault);
  };

  container.addEventListener('mousedown', window[onMouseDownSymbol], false);

[innv-imtinan]

where have you defined container