Tooltips

Customize the OHLC tooltip that shows open, high, low, close, and volume data.

← 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
candle.tooltip.showRule	When the tooltip appears. always = always visible, follow_cross = follows crosshair, none = hidden	'always' | 'follow_cross' | 'none'	'always'
candle.tooltip.showType	Tooltip layout style	'standard' | 'rect'	'standard'
candle.tooltip.title.show	Show tooltip title row	boolean	true
candle.tooltip.title.template	Title text template	string	'{ticker} · {period}'
candle.tooltip.title.color	Color of title text	color	'#76808F'
candle.tooltip.title.size	Font size of title text	number	14
candle.tooltip.legend.color	Color of OHLC value text	color	'#76808F'
candle.tooltip.legend.size	Font size of OHLC values	number	12
candle.tooltip.legend.defaultValue	Text shown when a value is missing	string	'n/a'
candle.tooltip.rect.color	Background color of tooltip box	color	'#FEFEFE'
candle.tooltip.rect.borderColor	Border color of tooltip box	color	'#F2F3F5'
candle.tooltip.rect.borderSize	Border thickness of tooltip box	number	1
candle.tooltip.rect.borderRadius	Corner roundness of tooltip box	number	4
candle.tooltip.rect.position	Where the tooltip is anchored	'fixed' | 'pointer'	'fixed'

Example

chart.setCustomStyles({
  dark: {
    candle: {
      tooltip: {
        legend: { color: '#e0e0e0' },
      },
    },
  },
})

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