Syncing cursors across multiple horizontally-arranged charts

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 use XYCursor's cursormoved event to position cursors on other charts simulating the same position.

Related code

// Sync cursors
const syncedCursors = [
  chart1.get("cursor"), chart2.get("cursor"), chart3.get("cursor")
];

function syncCursor(ev) {
  am5.array.each(syncedCursors, function(cursor) {
    if (cursor !== ev.target) {
      cursor.setTimeout(function() {
        cursor.handleMove(ev.target.getPrivate("lastPoint"), true);
        cursor.set("alwaysShow", true);
      }, 1);
    }
    else {
      cursor.set("alwaysShow", false);
    }
  })
}

function hideCursors(opacity, target) {
  am5.array.each(syncedCursors, function(cursor) {
    if (cursor !== target) {
      cursor.set("opacity", opacity);
      if (opacity == 0) {
        cursor.set("alwaysShow", false);
      }
    }
  });
}

// Sync cursors
var syncedCursors = [
  chart1.get("cursor"), chart2.get("cursor"), chart3.get("cursor")
];

function syncCursor(ev) {
  am5.array.each(syncedCursors, function(cursor) {
    if (cursor !== ev.target) {
      cursor.setTimeout(function() {
        cursor.handleMove(ev.target.getPrivate("lastPoint"), true);
        cursor.set("alwaysShow", true);
      }, 1);
    }
    else {
      cursor.set("alwaysShow", false);
    }
  })
}

function hideCursors(opacity, target) {
  am5.array.each(syncedCursors, function(cursor) {
    if (cursor !== target) {
      cursor.set("opacity", opacity);
      if (opacity == 0) {
        cursor.set("alwaysShow", false);
      }
    }
  });
}

Demo

See the Pen amCharts 5: Syncing cursors across several charts by amCharts team (@amcharts) on CodePen.