Candles

Customize candle appearance — bar colors, chart type, price marks, and area chart styling.

← Back to Custom Styles overview

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

Candle bars (candle.bar)

Property	Description	Type	Example
candle.bar.upColor	Fill color when price closes higher	color	'#26a69a'
candle.bar.downColor	Fill color when price closes lower	color	'#ef5350'
candle.bar.noChangeColor	Fill color when open equals close	color	'#9e9e9e'
candle.bar.upBorderColor	Border color on up candles	color	'#26a69a'
candle.bar.downBorderColor	Border color on down candles	color	'#ef5350'
candle.bar.noChangeBorderColor	Border color on flat candles	color	'#9e9e9e'
candle.bar.upWickColor	Wick color on up candles	color	'#26a69a'
candle.bar.downWickColor	Wick color on down candles	color	'#ef5350'
candle.bar.noChangeWickColor	Wick color on flat candles	color	'#9e9e9e'
candle.bar.compareRule	How up/down is determined	'current_open' | 'previous_close'	'current_open'

Chart type (candle.type)

Set candle.type to control how price is drawn on the chart.

Value	Description	Example
candle_solid	Filled candlesticks (default)	'candle_solid'
candle_stroke	Hollow candlesticks	'candle_stroke'
candle_up_stroke	Hollow up, filled down	'candle_up_stroke'
candle_down_stroke	Filled up, hollow down	'candle_down_stroke'
ohlc	OHLC bars	'ohlc'
area	Area / line chart	'area'
heikin_ashi	Heikin-Ashi candles	'heikin_ashi'

chart.setCustomStyles({
  global: {
    candle: { type: 'candle_solid' },
  },
})

Area chart (candle.area)

Use when candle.type is 'area'.

Property	Description	Type	Example
candle.area.lineColor	Color of the area chart line	color	'#1677FF'
candle.area.lineSize	Thickness of the area line	number	2
candle.area.smooth	Smooth/curve the line	boolean	true
candle.area.value	Price field to plot (close, etc.)	string	'close'
candle.area.point.show	Show dot on the latest price	boolean	true
candle.area.point.color	Color of the latest-price dot	color	'#1677FF'
candle.area.point.radius	Size of the latest-price dot	number	4

Price marks (candle.priceMark)

Property	Description	Type	Example
candle.priceMark.show	Show all price marks	boolean	true
candle.priceMark.high.show	Show highest price label	boolean	true
candle.priceMark.high.color	Color of the high price label	color	'#ff6b6b'
candle.priceMark.high.textSize	Font size of the high label	number	10
candle.priceMark.low.show	Show lowest price label	boolean	true
candle.priceMark.low.color	Color of the low price label	color	'#4ecdc4'
candle.priceMark.low.textSize	Font size of the low label	number	10
candle.priceMark.last.show	Show last price mark	boolean	true
candle.priceMark.last.upColor	Last price color when market is up	color	'#26a69a'
candle.priceMark.last.downColor	Last price color when market is down	color	'#ef5350'
candle.priceMark.last.line.show	Show line at last price	boolean	true
candle.priceMark.last.line.style	Last price line style	'dashed' | 'solid'	'dashed'
candle.priceMark.last.text.show	Show last price label	boolean	true
candle.priceMark.last.text.color	Text color of last price label	color	'#FFFFFF'
candle.priceMark.last.text.size	Font size of last price label	number	12

Renko (candle.renko)

Property	Description	Type	Example
candle.renko.brick.size	Minimum price move per Renko brick	number	10

Examples

Brand candle colors

chart.setCustomStyles({
  global: {
    candle: {
      bar: {
        upColor: '#1976d2',
        downColor: '#d32f2f',
      },
    },
  },
})

High/low price labels

chart.setCustomStyles({
  global: {
    candle: {
      priceMark: {
        high: { color: '#ff6b6b' },
        low: { color: '#4ecdc4' },
      },
    },
  },
})

Area chart

chart.setCustomStyles({
  global: {
    candle: {
      type: 'area',
      area: {
        lineColor: '#1677FF',
        lineSize: 2,
        smooth: true,
      },
    },
  },
})

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