Crosshair

A crosshair with value labels on the axes. By default it snaps to the nearest node (snap), together with the tooltip and highlighting.

Modular build

When building with grafit-charts/core, the crosshair is a separate module: register(crosshairModule).

config.tsdata.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Crosshair' },
    subtitle: { text: 'hover over the plot area' },
    series: [{ type: 'line', xField: 'month', yField: 'value', name: 'Value' }],
    crosshair: { enabled: true },
    legend: { enabled: false },
  };
}

export function getData() {
  return [
    { month: 'Jan', value: 412 },
    { month: 'Feb', value: 438 },
    { month: 'Mar', value: 471 },
    { month: 'Apr', value: 449 },
    { month: 'May', value: 502 },
    { month: 'Jun', value: 535 },
    { month: 'Jul', value: 518 },
    { month: 'Aug', value: 560 },
  ];
}

Option	Type	Default	Description
`enabled`	`boolean`	—	enable (presence of the block → enabled)
`snap`	`boolean`	`true`	snap to the nearest node
`stroke`	`ColorValue`	theme muted	line color
`strokeWidth`	`Pixels`	`1`	line width
`lineDash`	`Pixels[]`	`[4, 3]`	dash pattern
`label.enabled`	`boolean`	`true`	value labels on the axes

Crosshair ​

Crosshair