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
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"))); }
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
See the Pen
Line Graph by amCharts team (@amcharts)
on CodePen.0