Custom Styles

Load the ChartSpire stylesheet once: import '@chartspire/ui/style.css'. See Getting Started — Stylesheet.

Custom styles change how the chart looks — candles, grid, axes, crosshair, and so on.

Themes are separate. They control the app UI (menus, sidebars, panels), not the chart drawing.

What you can customize

Guide	Covers
Candles	Candle colors, chart type, price marks
Grid	Background grid lines
Axis	Time and price axes
Separator	Line between chart and indicator panels
Crosshair	Crosshair lines and labels
Tooltips	OHLC tooltip box
Indicators	Indicator colors and tooltips
Overlays	Drawing tool styles

TypeScript shapes: Style type reference

Quick start

const chart = new ChartSpire({
  // ...your usual options
  customStyles: {
    global: {
      candle: {
        bar: { upColor: '#26a69a', downColor: '#ef5350' },
      },
    },
  },
})

Change styles later:

chart.setCustomStyles({
  global: {
    candle: {
      bar: { upColor: '#26a69a', downColor: '#ef5350' },
    },
  },
})

Only include what you want to change. Everything else stays at its default.

Three ways to apply styles

How	Applies to	Use when
customStyles on init	All charts	Set styles at startup
chart.setCustomStyles()	All charts	Change styles at runtime
setCustomStyles({ global / light / dark })	Whole widget	Theme-aware look that survives theme switches

Widget-wide styles (customStyles / setCustomStyles) stay in place when the user switches themes.

Global, light, dark, or named theme?

When you call setCustomStyles, you choose where your changes apply:

Key	Applies when…	Good for
global	Any theme is active	Brand colors, defaults that never change
light	A light theme is active (e.g. Light Theme 1)	Tweaks that only make sense on light backgrounds
dark	A dark theme is active (e.g. Dark Theme)	Tweaks that only make sense on dark backgrounds
themes	One specific theme by name	Overrides for a single theme

global — your baseline. If you only set global, the same chart styles apply whether the user picks a light or dark theme.

light / dark — extra styles on top of global, but only when the active theme is in that group. Use these when light and dark themes need different grid colors, tooltip text, etc.

themes — the most specific. Use the theme's exact name (e.g. 'Blue Theme') when one built-in or custom theme needs its own look.

chart.setCustomStyles({
  // Always: green/red candles on every theme
  global: {
    candle: { bar: { upColor: '#26a69a', downColor: '#ef5350' } },
  },
  // Only on dark themes: softer grid
  dark: {
    grid: { horizontal: { color: '#333333' } },
  },
  // Only on "Blue Theme": blue up-candles
  themes: {
    'Blue Theme': {
      candle: { bar: { upColor: '#1976d2' } },
    },
  },
})

If two scopes conflict

More specific wins:

1. Default styles (built-in)
2. global
3. light or dark (whichever matches the active theme)
4. themes['Theme Name'] — wins over everything else

Your custom styles are kept when the user calls chart.setTheme().

Examples

Brand colors (every theme):

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

Dark-theme-only tooltip text:

chart.setCustomStyles({
  dark: {
    candle: { tooltip: { legend: { color: '#e0e0e0' } } },
  },
})

API

Method	What it does
setCustomStyles(styles)	Set widget-wide styles (replaces previous config)
getCustomStyles()	Read current styles
hasCustomStyles()	Check if any custom styles are set
clearCustomStyles()	Remove all custom styles

setCustomStyles replaces the full config each time. To keep existing values, read with getCustomStyles() first and merge.

Details: Widget API — Custom Styles

Note: The constructor styles option and chartspire.setStyles() were removed. Use customStyles on init or chartspire.setCustomStyles(...).