Cursor with "corner" crosshair lines

This demo shows how we can use adapters to make lines of the XY cursor go only to the target data item.

Code

TypeScript

cursor.lineX.adapters.add("y", function(y) {
  return cursor.lineY.y();
});

cursor.lineY.adapters.add("x", function(x) {
  return cursor.lineX.x() - chart.plotContainer.width();
});

JavaScript

cursor.lineX.adapters.add("y", function(y) {
  return cursor.lineY.y();
});

cursor.lineY.adapters.add("x", function(x) {
  return cursor.lineX.x() - chart.plotContainer.width();
});

Demo

Open in CodePen