Syncing cursors across multiple horizontally-arranged charts

XY#cursor#events#xy

This demo shows how we can use XYCursor’s cursormoved event to position cursors on other charts simulating the same position.

Related code

TypeScript

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

JavaScript

// 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

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Syncing cursors across multiple horizontally-arranged chartssyncing-cursors-across-multiple-horizontally-arranged-charts