Changing XYCursor’s behavior based on SHIFT key

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can dynamically alternate the XYCursor's behavior between zooming and panning based on whether SHIFT key pressed or not.

Related code

document.addEventListener("keydown", function(e) {
  if (e.shiftKey) {
    chart.set("panX", true);
    cursor.set("behavior", "none");
  }
});

document.addEventListener("keyup", function(e) {
  if (!e.shiftKey) {
    chart.set("panX", false);
    cursor.set("behavior", "zoomX");
  }
});

document.addEventListener("keydown", function(e) {
  if (e.shiftKey) {
    chart.set("panX", true);
    cursor.set("behavior", "none");
  }
});

document.addEventListener("keyup", function(e) {
  if (!e.shiftKey) {
    chart.set("panX", false);
    cursor.set("behavior", "zoomX");
  }
});

Demo

See the Pen Changing XYCursor's behavior based on SHIFT key by amCharts team (@amcharts) on CodePen.