Axis zoom end event

This demo shows how we can use value change events of the start and end axis settings, as well as use debouncing techniques on the handlers to detect when the zoom animation has finished.

Code

TypeScript

let startEndChangeTimeout;

xAxis.on("start", handleStartEndChange);
xAxis.on("end", handleStartEndChange);

function handleStartEndChange() {
  if (startEndChangeTimeout) {
    clearTimeout(startEndChangeTimeout);
  }
  startEndChangeTimeout = setTimeout(function() {
    zoomEnded();
  }, 50);
}

function zoomEnded() {
  console.log("Start", xAxis.getPrivate("selectionMin"), new Date(xAxis.getPrivate("selectionMin")));
  console.log("End", xAxis.getPrivate("selectionMax"), new Date(xAxis.getPrivate("selectionMax")));
}

JavaScript

var startEndChangeTimeout;

xAxis.on("start", handleStartEndChange);
xAxis.on("end", handleStartEndChange);

function handleStartEndChange() {
  if (startEndChangeTimeout) {
    clearTimeout(startEndChangeTimeout);
  }
  startEndChangeTimeout = setTimeout(function() {
    zoomEnded();
  }, 50);
}

function zoomEnded() {
  console.log("Start", xAxis.getPrivate("selectionMin"), new Date(xAxis.getPrivate("selectionMin")));
  console.log("End", xAxis.getPrivate("selectionMax"), new Date(xAxis.getPrivate("selectionMax")));
}

Demo

Open in CodePen