Theming

Pass a palette at creation - darkTheme (default), lightTheme, or your own:

import { createChart, lightTheme } from 'openalgo-charts';
const chart = createChart(el, { theme: lightTheme });

The theme drives the chrome (background, grid, axes, crosshair), series defaults (up/down, line, area gradient, last-price tag), and the trading layer (buy / sell / profit / loss). Per-series style always overrides the theme.

Light theme

const chart = lib.createChart(el, { theme: lib.lightTheme });
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 140, 3600));
chart.timeScale.fitContent(140);
return chart;

Custom palette

A theme is a plain object - spread a built-in and override what you need:

const chart = lib.createChart(el, {
theme: {
  ...lib.darkTheme,
  background: '#0b0f17',
  upColor: '#00b386',
  downColor: '#ff5d6c',
  grid: '#161b27',
},
});
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 140, 3600));
chart.timeScale.fitContent(140);
return chart;

Optional cosmetic fields: axisFontSize (px, default 11), gridStyle ('solid' | 'dashed' | 'dotted'), and background: 'transparent' to skip the pane fill so the page shows through. Crosshair styling: crosshairStyle ('solid' | 'dashed' | 'dotted'), crosshairWidth, crosshairLabelBackground, and crosshairLabelVisible (false hides the price/time value tags).

Dark / light at runtime

Swap the palette live with chart.setTheme(theme) — no recreate, no flicker. Click the chart below to toggle:

const chart = lib.createChart(el, { theme: lib.darkTheme });
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 140, 3600));
chart.fitContent();

let dark = true;
el.onclick = () => { dark = !dark; chart.setTheme(dark ? lib.darkTheme : lib.lightTheme); };
return chart;

applyOptions swaps several options at once — theme, grid visibility, formatters, and crosshair mode — at runtime:

chart.applyOptions({ theme: lightTheme, grid: { vertLines: false } });
chart.applyOptions({ crosshairMode: 'magnet' });