Themes & Chart Types

Switch between dark and light themes, and between all five price panel styles.

Built-in themes

import { Chart, CandlePanel, darkTheme, lightTheme } from 'chartgpu';

const chart = new Chart('#chart', { candles, timeframe: '1m' });
chart.addPanel(new CandlePanel());

// switch at any time
chart.setTheme(lightTheme);
chart.setTheme(darkTheme);

Custom theme

Pass any object that satisfies ChartTheme:

import type { ChartTheme } from 'chartgpu';

const myTheme: ChartTheme = {
  grid:          'rgba(30, 40, 60, 0.7)',
  border:        '#1e2838',
  axisLabel:     '#7b8ea0',
  crosshair:     'rgba(120,140,160,0.5)',
  tooltipBg:     'rgba(10,15,25,0.92)',
  legendBg:      'rgba(10,15,25,0.80)',
  textPrimary:   '#d6e4f0',
  textSecondary: '#7b8ea0',
  bull:          '#00c896',
  bear:          '#ff4d6d',
};

chart.setTheme(myTheme);

Chart types

Five price panel styles are available. Swap between them at runtime using swapPanel:

import {
  CandlePanel, OHLCPanel, LinePanel, AreaPanel, BaselinePanel,
} from 'chartgpu';

const candle   = new CandlePanel();
const line     = new LinePanel();
let active = candle;

chart.addPanel(candle);

// swap to line chart
chart.swapPanel(active, line);
active = line;

Panel	Description
CandlePanel	Classic Japanese candlesticks
OHLCPanel	OHLC bars
LinePanel	Close price line
AreaPanel	Filled area under close
BaselinePanel	Price change relative to a baseline

Log scale

chart.setScaleType('log');    // logarithmic Y axis
chart.setScaleType('linear'); // default