Crosshair

Customize the crosshair lines that follow your cursor.

← Back to Custom Styles overview

Copy the property path into your setCustomStyles config. You only need to include the values you want to change.

Property	Description	Type	Example
crosshair.show	Show or hide the crosshair	boolean	true
crosshair.horizontal.show	Show horizontal crosshair	boolean	true
crosshair.horizontal.line.show	Show horizontal line	boolean	true
crosshair.horizontal.line.color	Color of horizontal line	color	'#76808F'
crosshair.horizontal.line.style	Style of horizontal line	'dashed' | 'solid'	'dashed'
crosshair.horizontal.line.size	Thickness of horizontal line	number	1
crosshair.horizontal.text.show	Show price label on horizontal line	boolean	true
crosshair.horizontal.text.color	Text color of price label	color	'#FFFFFF'
crosshair.horizontal.text.backgroundColor	Background of price label	color	'#76808F'
crosshair.horizontal.text.size	Font size of price label	number	12
crosshair.vertical.show	Show vertical crosshair	boolean	true
crosshair.vertical.line.show	Show vertical line	boolean	true
crosshair.vertical.line.color	Color of vertical line	color	'#76808F'
crosshair.vertical.line.style	Style of vertical line	'dashed' | 'solid'	'dashed'
crosshair.vertical.text.show	Show time label on vertical line	boolean	true
crosshair.vertical.text.color	Text color of time label	color	'#FFFFFF'
crosshair.vertical.text.backgroundColor	Background of time label	color	'#76808F'

Example

chart.setCustomStyles({
  global: {
    crosshair: {
      horizontal: {
        line: { style: 'dashed', color: '#888888' },
      },
      vertical: {
        line: { style: 'dashed', color: '#888888' },
      },
    },
  },
})

Developers who need full TypeScript interfaces can use the type reference.