SnapPointFinder

import { SnapPointFinder } from 'cx/charts';

SnapPointFinder locates the nearest data point to the cursor position and outputs its coordinates. Use it to snap markers, display tooltips at data points, or highlight specific values on a graph.

 <div controller={PageController}>
  <Svg style="width: 100%; height: 300px">
    <Chart
      margin="30 30 40 50"
      axes={{
        x: { type: NumericAxis },
        y: { type: NumericAxis, vertical: true },
      }}
    >
      <MouseTracker x={m.cursor.x} y={m.cursor.y}>
        <Gridlines />
        <SnapPointFinder
          cursorX={m.cursor.x}
          snapX={m.snapX}
          snapY={m.snapY}
          maxDistance={Infinity}
        >
          <LineGraph data={m.data} colorIndex={0} />
        </SnapPointFinder>
        <MarkerLine visible={hasValue(m.snapX)} x={m.snapX} colorIndex={8} />
        <Marker
          visible={hasValue(m.snapX)}
          x={m.snapX}
          y={m.snapY}
          colorIndex={0}
          size={10}
          tooltip={{
            alwaysVisible: true,
            text: { tpl: "({snapX:n;0}, {snapY:n;1})" },
            placement: "up",
            destroyDelay: 0,
            createDelay: 0,
          }}
        />
      </MouseTracker>
    </Chart>
  </Svg>
  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px">
    <Button onClick="generate">Generate</Button>
    <span style="color: #666">Move mouse to snap to nearest data point</span>
  </div>
</div> 
 class PageController extends Controller {
  onInit() {
    this.generate();
  }

  generate() {
    let y = 150;
    this.store.set(
      m.data,
      Array.from({ length: 25 }, (_, x) => ({
        x: x * 4,
        y: (y = y + Math.random() * 20 - 10),
      })),
    );
  }
} 
 interface Point {
  x: number;
  y: number;
}

interface Cursor {
  x: number;
  y: number;
}

interface Model {
  data: Point[];
  cursor: Cursor;
  snapX: number;
  snapY: number;
}

const m = createModel<Model>(); 
 import { Svg } from "cx/svg";
import {
  Chart,
  NumericAxis,
  Gridlines,
  LineGraph,
  MouseTracker,
  SnapPointFinder,
  Marker,
  MarkerLine,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, hasValue } from "cx/ui";
import { Button, enableTooltips } from "cx/widgets";
enableTooltips(); 

Move mouse to snap to nearest data point

How It Works

Wrap graph elements (LineGraph, ColumnGraph, etc.) inside SnapPointFinder
Pass the cursor position via cursorX (and optionally cursorY)
Bind snapX/snapY to receive the coordinates of the nearest point
Use the snapped coordinates with Marker, MarkerLine, or tooltip elements

Configuration

Property	Type	Default	Description
`cursorX`	`number`		Cursor X position (from MouseTracker).
`cursorY`	`number`		Cursor Y position (from MouseTracker).
`snapX`	`number`		Bind for X coordinate of the nearest point.
`snapY`	`number`		Bind for Y coordinate of the nearest point.
`snapRecord`	`object`		Bind for full data record of the nearest point.
`maxDistance`	`number`	`50`	Maximum snap distance. Set to `Infinity` for TimeAxis or sparse data.
`convertX`	`function`		Convert X values (e.g., dates) to numbers. Required for TimeAxis.
`convertY`	`function`		Convert Y values (e.g., dates) to numbers. Required for TimeAxis.

SnapPointFinder

How It Works

See Also

Configuration