Skip to content
TradeX Chart

Custom Theme Builder API

API reference for customizing chart themes.

Chart Methods

setTheme()

Apply a theme to the chart.

chart.setTheme(theme: Theme): void

interface Theme {
  candle?: CandleTheme
  background?: string
  grid?: GridTheme
  xAxis?: AxisTheme
  yAxis?: AxisTheme
  crosshair?: CrosshairTheme
  volume?: VolumeTheme
  indicators?: IndicatorTheme
}

Parameters:

  • theme: Theme configuration object

Returns: void

Example:

chart.setTheme({
  candle: {
    upBodyColor: '#26a69a',
    downBodyColor: '#ef5350'
  },
  background: '#1e1e1e',
  grid: {
    color: '#2a2a2a'
  }
})

getTheme()

Get current theme configuration.

chart.getTheme(): Theme

Returns: Current theme object

Example:

const currentTheme = chart.getTheme()
console.log(currentTheme.background)

resetTheme()

Reset to default theme.

chart.resetTheme(): void

Returns: void

Example:

chart.resetTheme()

Theme Interfaces

CandleTheme

interface CandleTheme {
  upBodyColor?: string
  upWickColor?: string
  downBodyColor?: string
  downWickColor?: string
  borderWidth?: number
  wickWidth?: number
}

Example:

{
  candle: {
    upBodyColor: '#26a69a',
    upWickColor: '#26a69a',
    downBodyColor: '#ef5350',
    downWickColor: '#ef5350',
    borderWidth: 1,
    wickWidth: 1
  }
}

GridTheme

interface GridTheme {
  color?: string
  style?: 'solid' | 'dashed' | 'dotted'
  lineWidth?: number
  horizontal?: boolean
  vertical?: boolean
}

Example:

{
  grid: {
    color: '#2a2a2a',
    style: 'solid',
    lineWidth: 1,
    horizontal: true,
    vertical: true
  }
}

AxisTheme

interface AxisTheme {
  color?: string
  fontSize?: number
  fontFamily?: string
  fontWeight?: string | number
  height?: number  // For xAxis
  width?: number   // For yAxis
}

Example:

{
  xAxis: {
    color: '#666',
    fontSize: 12,
    fontFamily: 'Arial',
    height: 30
  },
  yAxis: {
    color: '#666',
    fontSize: 12,
    fontFamily: 'Arial',
    width: 80
  }
}

CrosshairTheme

interface CrosshairTheme {
  color?: string
  style?: 'solid' | 'dashed' | 'dotted'
  lineWidth?: number
}

Example:

{
  crosshair: {
    color: '#888',
    style: 'dashed',
    lineWidth: 1
  }
}

VolumeTheme

interface VolumeTheme {
  upColor?: string
  downColor?: string
  opacity?: number
}

Example:

{
  volume: {
    upColor: 'rgba(38, 166, 154, 0.5)',
    downColor: 'rgba(239, 83, 80, 0.5)',
    opacity: 0.5
  }
}

IndicatorTheme

interface IndicatorTheme {
  colors?: string[]
  lineWidth?: number
  opacity?: number
}

Example:

{
  indicators: {
    colors: ['#2196F3', '#FF9800', '#4CAF50', '#E91E63'],
    lineWidth: 2,
    opacity: 1
  }
}

Preset Themes

Dark Theme

const darkTheme: Theme = {
  candle: {
    upBodyColor: '#26a69a',
    upWickColor: '#26a69a',
    downBodyColor: '#ef5350',
    downWickColor: '#ef5350'
  },
  background: '#1e1e1e',
  grid: {
    color: '#2a2a2a',
    style: 'solid'
  },
  xAxis: {
    color: '#888',
    fontSize: 12
  },
  yAxis: {
    color: '#888',
    fontSize: 12
  },
  crosshair: {
    color: '#666',
    style: 'dashed'
  }
}

Light Theme

const lightTheme: Theme = {
  candle: {
    upBodyColor: '#4caf50',
    upWickColor: '#4caf50',
    downBodyColor: '#f44336',
    downWickColor: '#f44336'
  },
  background: '#ffffff',
  grid: {
    color: '#e0e0e0',
    style: 'solid'
  },
  xAxis: {
    color: '#333',
    fontSize: 12
  },
  yAxis: {
    color: '#333',
    fontSize: 12
  },
  crosshair: {
    color: '#999',
    style: 'dashed'
  }
}

Events

themeChanged

chart.on('themeChanged', (event: ThemeEvent) => void)

interface ThemeEvent {
  theme: Theme
}

Example:

chart.on('themeChanged', (event) => {
  console.log('Theme changed:', event.theme)
})

TypeScript Definitions

declare module 'tradex-chart' {
  export interface Theme {
    candle?: CandleTheme
    background?: string
    grid?: GridTheme
    xAxis?: AxisTheme
    yAxis?: AxisTheme
    crosshair?: CrosshairTheme
    volume?: VolumeTheme
    indicators?: IndicatorTheme
  }

  export interface CandleTheme {
    upBodyColor?: string
    upWickColor?: string
    downBodyColor?: string
    downWickColor?: string
    borderWidth?: number
    wickWidth?: number
  }

  export interface GridTheme {
    color?: string
    style?: 'solid' | 'dashed' | 'dotted'
    lineWidth?: number
    horizontal?: boolean
    vertical?: boolean
  }

  export interface AxisTheme {
    color?: string
    fontSize?: number
    fontFamily?: string
    fontWeight?: string | number
    height?: number
    width?: number
  }

  export interface CrosshairTheme {
    color?: string
    style?: 'solid' | 'dashed' | 'dotted'
    lineWidth?: number
  }

  export interface VolumeTheme {
    upColor?: string
    downColor?: string
    opacity?: number
  }

  export interface IndicatorTheme {
    colors?: string[]
    lineWidth?: number
    opacity?: number
  }

  export interface TradeXChart {
    setTheme(theme: Theme): void
    getTheme(): Theme
    resetTheme(): void
  }
}