Skip to main content

CrosshairConfig

type CrosshairConfig = {
  badgeColor?: VroomColor;
  badgeTextColor?: VroomColor;
  button?: CrosshairButtonConfig;
  hour12?: boolean;
  lineStyle?: CrosshairLineStyle;
  lineWidth?: number;
  mode?: CrosshairMode;
  offset?: number;
  simple?: {
    dimAhead?: boolean;
    dimOpacity?: number;
    height?: number;
  };
  timeFormat?: CrosshairTimeFormat;
};

Source: types/src/index.ts:1328

Crosshair behavior and look. Every field is optional; colors come from the theme (crosshair for the lines, crosshairTarget for the ring and badge fill, badgeText for badge text) unless badgeColor / badgeTextColor set the badge fill / text.

Properties​

badgeColor?​

optional badgeColor?: VroomColor;

Source: types/src/index.ts:1344

Fill of the crosshair's time and price badges, the plus button and the simple-mode badge. Defaults to theme.crosshairTarget, which also colors the ring; this leaves the ring alone. Text follows badgeTextColor.

badgeTextColor?​

optional badgeTextColor?: VroomColor;

Source: types/src/index.ts:1349

Text on the crosshair's time and price badges, the plus button and the simple-mode badge. Defaults to theme.badgeText.

button?​

optional button?: CrosshairButtonConfig;

Source: types/src/index.ts:1356

The plus button (advanced mode only). Replaces crosshairButton.

hour12?​

optional hour12?: boolean;

Source: types/src/index.ts:1338

12-hour clock with AM/PM (11:30 AM). Default false.

lineStyle?​

optional lineStyle?: CrosshairLineStyle;

Source: types/src/index.ts:1332

Default 'dashed' in advanced mode, 'solid' in simple mode.

lineWidth?​

optional lineWidth?: number;

Source: types/src/index.ts:1334

Line stroke in px. Default 1. Dash and dot spacing scale with it.

mode?​

optional mode?: CrosshairMode;

Source: types/src/index.ts:1330

Default 'advanced'. See CrosshairMode.

offset?​

optional offset?: number;

Source: types/src/index.ts:1354

Pixels the touch crosshair's dot and horizontal line sit above the finger (advanced mode). Default 40. Replaces crosshairOffset.

simple?​

optional simple?: {
  dimAhead?: boolean;
  dimOpacity?: number;
  height?: number;
};

Source: types/src/index.ts:1358

Simple-mode options.

dimAhead?​

optional dimAhead?: boolean;

Dim everything right of the line, the scrub highlight. Default true.

dimOpacity?​

optional dimOpacity?: number;

Opacity of what dimAhead dims, 0 to 1. Default 0.35.

height?​

optional height?: number;

Where the badge's top sits, as a fraction of the chart's height: 1 is the top, 0 the bottom. Default 1. The badge always stays fully on screen, and the line runs from under it down to the bottom of the plot.

timeFormat?​

optional timeFormat?: CrosshairTimeFormat;

Source: types/src/index.ts:1336

Default 'datetime' in advanced mode, 'time' in simple mode.