Skip to content

Indicators

Customize indicator panel colors and tooltips (RSI, MACD, moving averages, etc.).

← Back to Custom Styles overview

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

Tip: indicator.lines and indicator.bars are arrays. Use [0] for the first series, [1] for the second, and so on.

PropertyDescriptionTypeExample
indicator.bars[0].upColorFill color for up indicator barscolor'#2DC08E'
indicator.bars[0].downColorFill color for down indicator barscolor'#F92855'
indicator.bars[0].noChangeColorFill color for flat indicator barscolor'#76808F'
indicator.lines[0].colorColor of the first indicator linecolor'#FF9600'
indicator.lines[0].sizeThickness of the indicator linenumber1
indicator.lines[0].smoothSmooth/curve the indicator linebooleanfalse
indicator.lines[0].styleLine style (solid or dashed)'dashed' | 'solid''solid'
indicator.circles[0].upColorUp color for circle markerscolor'#2DC08E'
indicator.circles[0].downColorDown color for circle markerscolor'#F92855'
indicator.lastValueMark.showShow last value on the indicatorbooleanfalse
indicator.lastValueMark.text.showShow text label for last valuebooleanfalse
indicator.lastValueMark.text.colorColor of last value labelcolor'#FFFFFF'
indicator.tooltip.showRuleWhen the indicator tooltip appears'always' | 'follow_cross' | 'none''always'
indicator.tooltip.title.showShow indicator tooltip titlebooleantrue
indicator.tooltip.title.showNameInclude indicator name in titlebooleantrue
indicator.tooltip.title.showParamsInclude indicator params in titlebooleantrue
indicator.tooltip.legend.colorColor of tooltip value textcolor'#76808F'
indicator.tooltip.legend.sizeFont size of tooltip valuesnumber12

Example

typescript
chart.setCustomStyles({
  global: {
    indicator: {
      lines: [
        { color: '#FF9600' },
        { color: '#935EBD' },
        { color: '#1677FF' },
      ],
    },
  },
})

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