Theme

A theme defines the default visual styling for all chart elements. Themes allow you to establish a consistent look across the entire chart without having to configure each element individually. Per-component config props will override theme values when provided.

Example

See the default light theme for a complete example.

Properties

chart

Global chart-level styling.

chart.backgroundColor

• Type: string

chart.borders

• Type: BordersTheme

chart.xAxis

• Type: XAxisTheme

chart.grid

• Type: GridTheme

chart.crosshairs

• Type: CrosshairsTheme

panels

• Type: PanelTheme

Default styling applied to all panels.

layers

• Type: LayersTheme

Default styling for each layer type.

---

XAxisTheme

Properties

height

• Type: number

Height of the x-axis in pixels.

border

• Type: LineConfig

minorLabels

• Type: Omit<TimeLabelConfig, 'formatter'>

majorLabels

• Type: Omit<TimeLabelConfig, 'formatter'>

---

BordersTheme

Default

{
  left:   { color: '#ddd', width: 1, style: 'solid' },
  right:  { color: '#ddd', width: 1, style: 'solid' },
  top:    { color: '#ddd', width: 1, style: 'solid' },
  bottom: { color: '#ddd', width: 1, style: 'solid' },
}

Properties

left

• Type: LineConfig

right

• Type: LineConfig

top

• Type: LineConfig

bottom

• Type: LineConfig

---

GridTheme

Properties

time

• Type: LineConfig

Styling for vertical grid lines drawn at each time axis tick.

value

• Type: LineConfig

Styling for horizontal grid lines drawn at each value axis tick.

---

CrosshairsTheme

Properties

time

• Type: TimeCrosshairTheme

value

• Type: ValueCrosshairTheme

---

PanelTheme

Properties

paddingTop

• Type: number

paddingBottom

• Type: number

borderTop

• Type: LineConfig

controls

• Type: PanelControlsTheme

---

PanelControlsTheme

Properties

goToLatestButton

• Type: ButtonConfig

---

YAxisTheme

Default

{
  side: 'right',
  width: 60,
  border: { color: '#ddd', width: 1, style: 'solid' },
  labels: { padding: 6 }
}

Properties

side

• Type: 'left' | 'right'

Which side of the panel the y-axis is rendered on.

width

• Type: number

Width of the y-axis in pixels.

border

• Type: LineConfig

labels

• Type: ValueLabelConfig

---

LegendTheme

Default

{
  left: 12,
  backgroundColor: '#ffffff77',
  borderColor: 'transparent',
  borderWidth: 0,
  vPadding: 1,
  hPadding: 4,
  borderRadius: 0,
  label: ''
}

Properties

Extends LegendConfig (excluding fields).

fields

• Type: LegendFieldTheme[]

---

LegendFieldTheme

Properties

output

• Type: string

The output key of the layer value to display.

color

• Type: string

The text color for this field's value.

label

• Type: string

An optional label override.

---

LayersTheme

Defines default styling for each built-in layer type. Each key corresponds to a layer type and its associated theme interface.

Key	Theme type
candlesticks	CandlesticksTheme
priceLine	PriceLineTheme
volumeBars	VolumeBarsTheme

| sma | SmaTheme | | stochastic | StochasticTheme |

---

CandlesticksTheme

Properties

series

• Type: { body: DirectionalBarConfig; wick: DirectionalLineConfig }

Styling for candlestick body and wick.

markers

• Type: { value: DirectionalValueMarkerTheme }

legend

• Type: LegendTheme

yAxis

• Type: YAxisTheme

---

DirectionalValueMarkerTheme

Properties

up

• Type: ValueMarkerConfig

down

• Type: ValueMarkerConfig

flat

• Type: ValueMarkerConfig

---

PriceLineTheme

Properties

series

• Type: { value: LineConfig }

markers

• Type: { value: ValueMarkerConfig }

legend

• Type: LegendTheme

yAxis

• Type: YAxisTheme

---

VolumeBarsTheme

Properties

series

• Type: { bars: DirectionalBarConfig }

markers

• Type: { value: ValueMarkerConfig }

legend

• Type: LegendTheme

yAxis

• Type: YAxisTheme

---

SmaTheme

Properties

series

• Type: { value: LineConfig }

markers

• Type: { value: ValueMarkerConfig }

legend

• Type: LegendTheme

yAxis

• Type: YAxisTheme

---

StochasticTheme

Properties

series

• Type: { k: LineConfig; d: LineConfig }

Styling for the %K and %D lines.

markers

• Type: { k: ValueMarkerConfig; d: ValueMarkerConfig }

legend

• Type: LegendTheme

yAxis

• Type: YAxisTheme

---

TypeScript

interface Theme {
  chart: {
    backgroundColor: string;
    xAxis: XAxisTheme;
    borders: BordersTheme;
    grid: GridTheme;
    crosshairs: CrosshairsTheme;
  };
  panels: PanelTheme;
  layers: LayersTheme;
}

interface XAxisTheme {
  height: number;
  border: LineConfigComplete;
  minorLabels: Omit<TimeLabelConfigComplete, 'formatter'>;
  majorLabels: Omit<TimeLabelConfigComplete, 'formatter'>;
}

interface BordersTheme {
  left: LineConfigComplete;
  right: LineConfigComplete;
  top: LineConfigComplete;
  bottom: LineConfigComplete;
}

interface GridTheme {
  time: LineConfigComplete;
  value: LineConfigComplete;
}

interface CrosshairsTheme {
  time: TimeCrosshairTheme;
  value: ValueCrosshairTheme;
}

interface PanelTheme {
  paddingTop: number;
  paddingBottom: number;
  borderTop: LineConfigComplete;
  controls: PanelControlsTheme;
}

interface PanelControlsTheme {
  goToLatestButton: ButtonTheme;
}

interface YAxisTheme {
  side: 'left' | 'right';
  width: number;
  border: LineConfigComplete;
  labels: ValueLabelConfigComplete;
}

interface LegendTheme extends Omit<LegendConfigComplete, 'fields'> {
  fields: LegendFieldTheme[];
}

interface LegendFieldTheme {
  output: string;
  color: string;
  label?: string;
}

interface LayersTheme {
  candlesticks: CandlesticksTheme;
  priceLine: PriceLineTheme;
  volumeBars: VolumeBarsTheme;
  atr: AtrTheme;
  bollingerBands: BollingerBandsTheme;
  ema: EmaTheme;
  macd: MacdTheme;
  rsi: RsiTheme;
  sma: SmaTheme;
  stochastic: StochasticTheme;
}

interface CandlesticksTheme {
  series: {
    body: DirectionalBarTheme;
    wick: DirectionalLineTheme;
  };
  markers: {
    value: DirectionalValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface DirectionalValueMarkerTheme {
  up: ValueMarkerTheme;
  down: ValueMarkerTheme;
  flat: ValueMarkerTheme;
}

interface PriceLineTheme {
  series: {
    value: LineConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface VolumeBarsTheme {
  series: {
    bars: DirectionalBarConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface AtrTheme {
  series: {
    value: LineConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface BollingerBandsTheme {
  series: {
    middle: LineConfigComplete;
    upper: LineConfigComplete;
    lower: LineConfigComplete;
  };
  bands: {
    channel: {
      fillColor: string;
    };
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface EmaTheme {
  series: {
    value: LineConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface MacdTheme {
  series: {
    macd: LineTheme;
    signal: LineTheme;
    histogramUp: BarConfigComplete;
    histogramDown: BarConfigComplete;
  };
  markers: {
    macd: ValueMarkerTheme;
    signal: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface RsiTheme {
  series: {
    value: LineConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface SmaTheme {
  series: {
    value: LineConfigComplete;
  };
  markers: {
    value: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}

interface StochasticTheme {
  series: {
    k: LineTheme;
    d: LineTheme;
  };
  markers: {
    k: ValueMarkerTheme;
    d: ValueMarkerTheme;
  };
  legend: LegendTheme;
  yAxis: YAxisTheme;
}