Changing XYCursor's behavior based on SHIFT key

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

TypeScript

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");
  }
});

JavaScript

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

Open in CodePen