Theme Customization

ChartSpire supports built-in themes, custom themes via themeCustom, and a theme generator UI. Themes control the ChartSpire UI (sidebar, panels, popovers). For chart-level styling (candles, grid, axes), see Custom Styles. Themes switch in real time without recreating the chart.

Configuration

new ChartSpire({
  theme: 'Dark Theme',
  themeCustom: [],
  themeGeneraterEnabled: true,
  themesEnabled: true,
  themeUseExternalStorage: false,
  // ...
})

Option	Type	Default	Description
theme	string	—	Initial theme (use built-in or custom displayName)
themeCustom	CustomTheme[]	—	Custom themes to register
themeGeneraterEnabled	boolean	true	Show theme generator in bottom bar
themesEnabled	boolean	true	Show theme selector in bottom bar
themeUseExternalStorage	boolean	false	Use callbacks instead of localStorage for custom themes

Built-in Themes

'Light Theme 1', 'Light Theme 2', 'Midnight Theme', 'Dark Theme', 'Dark Gray Theme', 'Blue Theme', 'Red Theme', 'Green Theme', 'Yellow Theme', 'Pink Theme'

// Set on init
new ChartSpire({ theme: 'Dark Theme' })

// Or change at runtime
chart.setTheme('Light Theme 1')

Custom Themes

Via themeCustom

import ChartSpire, { type CustomTheme } from '@chartspire/chartspire'

const customThemes: CustomTheme[] = [{
  name: 'corporate-blue',
  displayName: 'Corporate Blue',
  colors: {
    primaryColor: '#0066CC',
    selectedColor: 'rgba(0, 102, 204, 0.15)',
    hoverBackgroundColor: 'rgba(0, 102, 204, 0.1)',
    backgroundColor: '#F8F9FA',
    popoverBackgroundColor: '#FFFFFF',
    textColor: '#212529',
    textSecondColor: '#6C757D',
    borderColor: '#DEE2E6'
  }
}]

new ChartSpire({
  themeCustom: customThemes,
  theme: 'Corporate Blue'
})

Via Theme Generator

With themeGeneraterEnabled: true and themesEnabled: true, users can create and edit themes in the bottom bar. Custom themes are stored in localStorage by default.

External Storage

External storage persists custom themes to your backend instead of localStorage. When themeUseExternalStorage: true, register callbacks before creating the chart:

import ChartSpire, { setThemeChangeCallback, setGetThemeDataCallback } from '@chartspire/chartspire'

setThemeChangeCallback(async (themes) => {
  const res = await fetch('/api/themes/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(themes)
  })
  return res.ok
})

setGetThemeDataCallback(async () => {
  const res = await fetch('/api/themes')
  return res.ok ? await res.json() : null
})

new ChartSpire({
  themeUseExternalStorage: true,
  // ...
})

• Save: Receives CustomTheme[]. Return false on failure.
• Load: Returns CustomTheme[] | null.

CustomTheme Interface

interface CustomTheme {
  name: string
  displayName: string
  colors: ThemeColors
}

interface ThemeColors {
  primaryColor: string
  selectedColor: string
  hoverBackgroundColor: string
  backgroundColor: string
  popoverBackgroundColor: string
  textColor: string
  textSecondColor: string
  borderColor: string
}

Custom theme displayName must not match a built-in theme name.