Appearance
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.linesandindicator.barsare arrays. Use[0]for the first series,[1]for the second, and so on.
| Property | Description | Type | Example |
|---|---|---|---|
indicator.bars[0].upColor | Fill color for up indicator bars | color | '#2DC08E' |
indicator.bars[0].downColor | Fill color for down indicator bars | color | '#F92855' |
indicator.bars[0].noChangeColor | Fill color for flat indicator bars | color | '#76808F' |
indicator.lines[0].color | Color of the first indicator line | color | '#FF9600' |
indicator.lines[0].size | Thickness of the indicator line | number | 1 |
indicator.lines[0].smooth | Smooth/curve the indicator line | boolean | false |
indicator.lines[0].style | Line style (solid or dashed) | 'dashed' | 'solid' | 'solid' |
indicator.circles[0].upColor | Up color for circle markers | color | '#2DC08E' |
indicator.circles[0].downColor | Down color for circle markers | color | '#F92855' |
indicator.lastValueMark.show | Show last value on the indicator | boolean | false |
indicator.lastValueMark.text.show | Show text label for last value | boolean | false |
indicator.lastValueMark.text.color | Color of last value label | color | '#FFFFFF' |
indicator.tooltip.showRule | When the indicator tooltip appears | 'always' | 'follow_cross' | 'none' | 'always' |
indicator.tooltip.title.show | Show indicator tooltip title | boolean | true |
indicator.tooltip.title.showName | Include indicator name in title | boolean | true |
indicator.tooltip.title.showParams | Include indicator params in title | boolean | true |
indicator.tooltip.legend.color | Color of tooltip value text | color | '#76808F' |
indicator.tooltip.legend.size | Font size of tooltip values | number | 12 |
Example
typescript
chart.setCustomStyles({
global: {
indicator: {
lines: [
{ color: '#FF9600' },
{ color: '#935EBD' },
{ color: '#1677FF' },
],
},
},
})Developers who need full TypeScript interfaces can use the type reference.