Skip to content

Customization

Theme tokens, live

Change the palette, grid, fonts and candle colors and watch the chart repaint without being recreated.

Theme tokens, live@ortex-charts/financial
Loading theme tokens, live…
Change the palette, grid, fonts and candle colors and watch the chart repaint without being recreated.

What this example is for

Every colour, font and radius the chart uses comes from a token, and changing one repaints rather than rebuilds: the series, the indicators, the drawings and the visible range all survive. Reach for this when the chart has to match a product's design system, or switch with it between light and dark.

theme-tokens.ts
import { createFinancialChart, darkTheme, lightTheme, type Theme } from "@ortex-charts/financial";
import { SAMPLE_LOGO } from "@/lib/constants";

// A theme is a plain object. Start from a built-in one and override what
// your brand owns; anything you do not name keeps the built-in value.
const tokens: Theme = {
    ...(theme === "light" ? lightTheme : darkTheme),
    name: "your-brand",
    up: "#3AAEA9",
    down: "#EF4E5A",
    upWick: "#3AAEA9",
    downWick: "#EF4E5A",
};

const chart = createFinancialChart(box, {
    legend: { logo: SAMPLE_LOGO }, // the company mark beside the symbol in the legend
    theme: tokens,
    timeZone: TIME_ZONE,
    resolution: "1D",
    watermark: { text: SYMBOL, visible: true, fontSize: 40 },
    seriesOptions: { title: SYMBOL },
    data: bars,
});
chart.addIndicator("ema", { length: 21 });

/** Every control on this page ends here: change a token, repaint. */
function apply(patch: Partial<Theme>): void {
    Object.assign(tokens, patch);
    chart.chart.setTheme(tokens);
}

/** Grid lines are a chart option rather than a color, so they go the other way. */
function setGrid(on: boolean): void {
    chart.chart.applyOptions({ grid: { horizontal: on, vertical: on } });
}

More customization examples