Overlays

Customize drawing tool appearance — trend lines, rectangles, fibonacci retracements, and more.

← 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
overlay.point.color	Color of drawing anchor points	color	'#1677FF'
overlay.point.radius	Size of drawing anchor points	number	5
overlay.point.borderColor	Border around anchor points	color	'rgba(22, 119, 255, 0.35)'
overlay.point.activeColor	Color when a point is selected	color	'#1677FF'
overlay.point.activeRadius	Size when a point is selected	number	5
overlay.line.color	Color of drawn lines	color	'#1677FF'
overlay.line.size	Thickness of drawn lines	number	1
overlay.line.smooth	Smooth/curve drawn lines	boolean	false
overlay.line.style	Line style (solid or dashed)	'dashed' | 'solid'	'solid'
overlay.rect.color	Fill color of rectangles	color	'rgba(22, 119, 255, 0.25)'
overlay.rect.borderColor	Border color of rectangles	color	'#1677FF'
overlay.rect.borderSize	Border thickness of rectangles	number	1
overlay.rect.borderRadius	Corner roundness of rectangles	number	0
overlay.polygon.color	Fill color of polygons	color	'#1677FF'
overlay.circle.color	Fill color of circles	color	'rgba(22, 119, 255, 0.25)'
overlay.text.color	Text color on drawing labels	color	'#FFFFFF'
overlay.text.size	Font size on drawing labels	number	12
overlay.text.backgroundColor	Background of drawing labels	color	'#1677FF'

Example

chart.setCustomStyles({
  global: {
    overlay: {
      line: { color: '#E11D74', size: 2 },
      rect: { color: 'rgba(225, 29, 116, 0.2)', borderColor: '#E11D74' },
    },
  },
})

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