Theming & Colors

Switch dark / light themes, override candle, background, grid, crosshair, and last-price-line colors, and keep the chart visually aligned with the rest of your product.

The chart ships with two built-in themes (dark / light) and a flat set of color setters that let you override every visible primitive. Most teams pick a theme and tweak two or three colors to match brand. Some override everything and end up with a fully custom palette — both flows are first-class.

The whole surface is side-effect free until next paint: every setter writes once, the next frame picks up the new color, no flicker, no re-init.

Two ways to theme

A. The built-in theme. One call sets a coherent palette for every primitive at once (background, grid, crosshair, axes, candles, indicator defaults). Use this when you want "match the dark mode toggle in my app" and you don't care about brand-matching every pixel.

B. Individual color setters. Override one primitive at a time, on top of the active theme. Use this when you have a brand palette and you want the chart to inherit it.

Both flows compose: call setTheme('dark') first, then layer your brand colors on top. Subsequent theme switches will reset to the new theme's defaults — your overrides need to be re-applied on theme change. The recipe for that is below.

Built-in theme

`chart.setTheme(name)`

Switches the active theme. Accepts 'dark' or 'light'. Repaints on the next frame.

JavaScript

chart.setTheme('dark')
chart.setTheme('light')

`chart.getTheme()`

Returns the active theme name — 'dark' or 'light'. Useful when initialising your overrides:

JavaScript

const isLight = chart.getTheme() === 'light'
chart.setCandleBullColor(isLight ? '#26a69a' : '#0ECB81')

Binding to your app's theme store

JavaScript

// Vue 3
watch(themeStore.mode, (m) => chart.setTheme(m), { immediate: true })

// React
useEffect(() => chart.setTheme(mode), [mode])

Background

`chart.setBackgroundColor(hex)`

Solid background fill. Accepts a 6-digit hex string ('#0B0E11'). Three- and four-digit hex shorthand is not supported — expand to six digits.

JavaScript

chart.setBackgroundColor('#0B0E11')   // dark
chart.setBackgroundColor('#FFFFFF')   // light

`chart.setBgGradient(enabled, endHex)`

Enables a vertical gradient background. The active setBackgroundColor is the top color; endHex is the bottom color. Set enabled=false to fall back to solid.

JavaScript

chart.setBackgroundColor('#0B0E11')   // top
chart.setBgGradient(true, '#000000')  // bottom — fade to pure black

Tip: gradients look great in dashboards but distract on a trading workstation where the user is comparing candles all day. Default to solid; only enable on screenshots and marketing surfaces.

Candles

Six independent colors per direction — body, wick, and border — let you match any house style.

`chart.setCandleBullColor(hex)` / `chart.setCandleBearColor(hex)`

Solid body fill for bullish (close ≥ open) and bearish (close < open) candles.

JavaScript

// Binance-style
chart.setCandleBullColor('#0ECB81')
chart.setCandleBearColor('#F6465D')

// Material-style
chart.setCandleBullColor('#26a69a')
chart.setCandleBearColor('#ef5350')

// Bookmap-like
chart.setCandleBullColor('#3D9970')
chart.setCandleBearColor('#FF4136')

`chart.setCandleBullWickColor(hex)` / `chart.setCandleBearWickColor(hex)`

Wick (high-low line) color, separately from the body. Default mirrors the body.

JavaScript

// Monochrome wicks ("TradingView clean" look)
chart.setCandleBullWickColor('#FFFFFF')
chart.setCandleBearWickColor('#FFFFFF')

`chart.setCandleBullBorderColor(hex)` / `chart.setCandleBearBorderColor(hex)`

Outline that runs around the body. Set to the body color to remove the outline visually.

JavaScript

// Hollow bullish candles
chart.setCandleBullColor('#0B0E11')
chart.setCandleBullBorderColor('#0ECB81')

Grid

`chart.setGridColor(hex, alpha = 255)`

Sets the color and opacity of both horizontal and vertical grid lines. alpha is 0-255 (byte), defaults to fully opaque. Most pro tools use 20-40 % alpha so the grid is present but doesn't compete with the price action.

JavaScript

chart.setGridColor('#FFFFFF', 26)   // ~10 % alpha on dark background
chart.setGridColor('#000000', 26)   // ~10 % alpha on light background

`chart.setGridHVisible(visible)` / `chart.setGridVVisible(visible)`

Independently toggle the horizontal and vertical grid lines. Setting both to false gives you a clean canvas with only the candles and axes visible.

JavaScript

chart.setGridHVisible(true)   // keep price gridlines
chart.setGridVVisible(false)  // hide time gridlines (cleaner look)

Crosshair

`chart.setCrosshairColor(hex, alpha = 160)`

Color and opacity of the crosshair lines that follow the cursor. Default alpha is 160 (~63 %), light enough to read price labels through.

JavaScript

chart.setCrosshairColor('#D4A60A', 200)

`chart.setCrosshairStyle(style)`

style is an integer enum: 0 solid, 1 dashed, 2 dotted (other values may exist depending on engine version — check the Chart Instance page for the full enum table).

JavaScript

chart.setCrosshairStyle(1)  // dashed

`chart.setCrosshairWidth(width)`

Line width in CSS pixels. 1 is the default; 2 is a thicker, more visible crosshair recommended for high-DPR displays where 1 px looks too thin.

JavaScript

chart.setCrosshairWidth(1.5)

`chart.setCrosshairMagnet(mode)`

Snap-to-OHLC behaviour. 'off' (the default) lets the crosshair sit at any pixel. 'weak' snaps to the nearest OHLC value within a small tolerance. 'strong' always snaps to OHLC. Integer enum 0 | 1 | 2 is also accepted.

JavaScript

chart.setCrosshairMagnet('weak')

Magnet mode is per-instance UI state — it's not part of the persisted chart data.

Last price line

The horizontal dashed line that marks the last close price.

`chart.setLastPriceLine(config)`

JavaScript

chart.setLastPriceLine({
  enabled: true,
  width: 1,        // line thickness in px
  dashLen: 4,      // dash length in px
  gapLen: 3,       // gap length in px
})

Pass enabled: false to hide the line entirely. The line color is inherited from the candle direction (bull color when the last candle is up, bear color when down).

Fonts

`chart.setFontSize(size)`

Sets the base font size for axis labels and price tags, in pixels. Defaults to 11. Larger sizes (13-14) improve readability on 4K displays.

JavaScript

chart.setFontSize(13)

Hide layers entirely

Color setters change how a layer looks. These setters control whether a layer renders at all — useful when the user wants a clean look for screenshots or a single-purpose pane.

`chart.setKlineVisible(visible)` / `chart.getKlineVisible()`

Toggle the candle / footprint / renko base layer. The orderbook heatmap, indicators, drawings, and crosshair all keep rendering — useful for "depth-only" research views.

`chart.setIndicatorsVisible(visible)`

Show / hide ALL indicator overlays and sub-panes at once. The base chart, volume, axes, grid, price line, crosshair, and orderbook heatmap keep rendering. Useful for a focus-mode toggle.

`chart.setDrawingsVisible(visible)`

Show / hide all user-drawn shapes (trendlines, fibs, channels, …). Drawings are preserved in memory — only the render pass is skipped.

Indicator and layer colors

Indicators expose their colors via updateIndicatorParams. The exact param keys depend on the indicator (RSI has a single line, MACD has three series, VRVP has a bull/bear pair). The pattern is always the same:

JavaScript

chart.updateIndicatorParams(rsiId, { lineColour: '#D4A60A' })
chart.updateIndicatorParams(macdId, {
  macdColour: '#0ECB81',
  signalColour: '#F6465D',
  histPosColour: '#0ECB81',
  histNegColour: '#F6465D',
})

See Indicators for the full per-indicator color schema.

For the orderbook heatmap colormap and intensity range, see Orderbook Heatmap › Color & Range.

For footprint cell color modes (Bid×Ask, Delta, Volume), see Footprint Chart.

Recipes

Preserve overrides across theme switch

setTheme resets every color to that theme's defaults. If you have brand overrides on top, re-apply them after the switch:

JavaScript

const BRAND = {
  bull: '#0ECB81',
  bear: '#F6465D',
  background: '#0B0E11',
}

function applyBrand() {
  chart.setBackgroundColor(BRAND.background)
  chart.setCandleBullColor(BRAND.bull)
  chart.setCandleBearColor(BRAND.bear)
  chart.setCandleBullWickColor(BRAND.bull)
  chart.setCandleBearWickColor(BRAND.bear)
  chart.setCandleBullBorderColor(BRAND.bull)
  chart.setCandleBearBorderColor(BRAND.bear)
}

watch(themeStore.mode, (m) => {
  chart.setTheme(m)
  applyBrand()
})

Pull colors from CSS variables

If your design system exposes colors as CSS variables, read them at runtime instead of duplicating hex literals:

JavaScript

function cssVar(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}

chart.setCandleBullColor(cssVar('--brand-bull'))
chart.setCandleBearColor(cssVar('--brand-bear'))
chart.setBackgroundColor(cssVar('--brand-bg'))

Re-run this on theme change so CSS-driven palettes flow through automatically.

Match Apple-glass UI surrounding the chart

The chart canvas can stay opaque (recommended for performance) while your surrounding panels use frosted glass. Match the chart background to the deepest layer of your glass stack so there's no seam:

JavaScript

chart.setBackgroundColor('#0F1215')   // dark glass base
chart.setGridColor('#FFFFFF', 14)     // ~5 % alpha — barely visible
chart.setCrosshairColor('#FFFFFF', 140)

Common pitfalls

Three-digit hex ('#fff') doesn't work. The color parser expects six hex digits. Expand short-form colors to six digits before passing.

Colors reset after setTheme. Documented in the recipe above — bind your brand-override re-application to the theme-change event, not just to initial chart setup.

setCrosshairColor(hex, 0) makes the crosshair invisible, not hidden. Alpha 0 means "render but fully transparent". To genuinely hide the crosshair, the chart's interaction layer still uses it for tooltip math — keep the alpha at a low non-zero value (e.g. 8) instead.

Bear colors used for "destructive" UI affordances elsewhere in the app.#F6465D / #ef5350 carry "this is a SELL / closed-loss" meaning on a trading screen. Using the same hex on a "Cancel" button creates a colour collision the trader has to parse twice. Reserve trade-data red for trade-data.

Setting candle colors before the first setKlines call. The color is stored on the engine state, so this works — but the chart isn't painted yet, so you may think the call had no effect. Set colors at the time you want, then call setKlines + start.

Per-frame set*Color calls. Color setters cross the bridge. Calling them inside a render loop for an "animation" wastes work — the colors only need to change when the user / theme changes them. Cache the active palette and call setters only on real transitions.

Indicators — per-indicator color params (lineColour, histPosColour, …).
Orderbook Heatmap — depth-cell colormap and intensity range.
Footprint Chart — Bid×Ask / Delta / Volume cell color modes.
Performance — when to call theme setters and when not to.