Custom cursor

Customized cursors are one common application of interoperating with UI frameworks. The default cursors in LightningChart JS are fairly simple in terms of visual options (for example, rounded borders are not supported).

When advanced CSS styling is required, the recommended approach is to implement a custom cursor.

info

If your use case requires cursor with multi-series tracking (showing multiple series values at same time), please contact us.

Generally the process goes like this:

1. Disable default auto cursor.
2. Track user interactions above charts and series using Events.
3. Solve nearest data points from mouse/touch events using "solve nearest" functionality.
4. Translate the data point location from LightningChart Axes to web page client coordinates.
5. Draw the custom cursor using HTML or a frontend library like React, Vue or other framework.

Below you can find a simple reference implementation with HTML:

const resultTable = document.createElement("div");
document.body.append(resultTable);
resultTable.style.position = "absolute";
resultTable.style.opacity = "0.0";
resultTable.style.transition = "opacity 0.3s, left 0.3s, top 0.3s";
resultTable.style.backgroundColor = "black";
resultTable.style.color = "white";
resultTable.style.border = "solid 1px white";
resultTable.style.borderRadius = "8px";
resultTable.style.zIndex = "100";
resultTable.style.padding = "6px";
resultTable.style.pointerEvents = "none";
resultTable.style.fontFamily = "Verdana";

const chart = lightningChart()
  .ChartXY()
  // Disable default cursor
  .setAutoCursorMode(AutoCursorModes.disabled);

const axisX = chart.getDefaultAxisX();
const axisY = chart.getDefaultAxisY();
const lineSeries = chart
  .addLineSeries({ dataPattern: { pattern: "ProgressiveX" } })
  .setCursorInterpolationEnabled(false)
  .addArrayY(new Array(100).fill(0).map((_) => Math.random()));

const displayCustomCursorAt = (event: MouseEvent) => {
  resultTable.style.opacity = "1.0";

  const nearest = lineSeries.solveNearestFromScreen(event);
  if (!nearest) {
    return;
  }

  // Translate nearest data point location to client for positioning HTML.
  const nearestLocClient = chart.translateCoordinate(nearest.location, chart.coordsAxis, chart.coordsClient)

  resultTable.style.left = `${nearestLocClient.clientX}px`;
  resultTable.style.top = `${nearestLocClient.clientY}px`;
  resultTable.innerHTML = `Trend<br/>X: ${axisX.formatValue(
    nearest.location.x
  )}<br/>Y: ${axisY.formatValue(nearest.location.y)}`;
};
const hideCustomCursor = () => {
  resultTable.style.opacity = "0.0";
};

chart.onSeriesBackgroundMouseMove((_, event) => displayCustomCursorAt(event));
chart.onSeriesBackgroundMouseLeave((_, event) => hideCustomCursor());
lineSeries.onMouseMove((_, event) => displayCustomCursorAt(event));

Find more ideas about custom cursors in our Interactive Examples.