MouseTracker

import { MouseTracker } from 'cx/charts';

MouseTracker tracks the mouse position within a chart and writes the coordinates to the store. Use it to create crosshairs, show tooltips at cursor position, or highlight nearby data points.

 <div>
  <Svg style="width: 100%; height: 300px">
    <Chart
      margin="30 30 40 50"
      axes={{
        x: { type: NumericAxis, min: 0, max: 100 },
        y: { type: NumericAxis, min: 0, max: 100, vertical: true },
      }}
    >
      <Gridlines />
      <MouseTracker
        x={m.cursor.x}
        y={m.cursor.y}
        tooltip={{
          destroyDelay: 5,
          createDelay: 5,
          text: { tpl: "({cursor.x:n;1}, {cursor.y:n;1})" },
          trackMouse: true,
        }}
      >
        <Marker
          visible={hasValue(m.cursor)}
          x={m.cursor.x}
          y={m.cursor.y}
          size={10}
          colorIndex={0}
        />
        <MarkerLine
          visible={hasValue(m.cursor)}
          x={m.cursor.x}
          y1={0}
          y2={m.cursor.y}
          colorIndex={0}
        />
        <MarkerLine
          visible={hasValue(m.cursor)}
          y={m.cursor.y}
          x2={m.cursor.x}
          x1={0}
          colorIndex={0}
        />
      </MouseTracker>
    </Chart>
  </Svg>
  <p style="text-align: center; color: #666; margin-top: 8px">
    Move your mouse over the chart to track position
  </p>
</div> 
 interface Cursor {
  x: number;
  y: number;
}

interface Model {
  cursor: Cursor;
}

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

Move your mouse over the chart to track position

How It Works

Wrap chart elements that should respond to cursor position inside MouseTracker
Bind x and y props to store the cursor coordinates
Use the bound values to position Markers, MarkerLines, or other elements

Configuration

Property	Type	Description
`x`	`number`	Bind for cursor x coordinate (in axis units).
`y`	`number`	Bind for cursor y coordinate (in axis units).
`tooltip`	`object`	Tooltip configuration for showing cursor values.

MouseTracker

How It Works

Configuration

See Also