Theming & Localization

Themes

Four built-in themes are available. You can also extend any theme to customize individual style properties.

Built-in Themes

LightGanttChartTheme	Clean light appearance (default).
DarkGanttChartTheme	Dark background with light text.
ModernGanttChartTheme	Contemporary styling with rounded elements.
ClassicGanttChartTheme	Traditional Gantt chart look.

import { DarkGanttChartTheme } from '@timelinekit/core';

gantt.settings.theme = new DarkGanttChartTheme();

// Currency symbol for cost columns
gantt.settings.currencySymbol = '€';
gantt.settings.currencySymbolDisplayMode = 'beforeAmount'; // or 'afterAmount', 'beforeAmountWithSpace', 'afterAmountWithSpace'

// Example: Czech koruna (symbol after amount)
gantt.settings.currencySymbol = 'Kč';
gantt.settings.currencySymbolDisplayMode = 'afterAmountWithSpace'; // renders e.g. "1 234,50 Kč"

For full customization options (colors, fonts, task bar styling, etc.), see the Theming & Styles guide.

Localization

14 locales are included. Each locale translates column headers, tooltips, constraint labels, and more.

import { csLocale } from '@timelinekit/core';

gantt.settings.locale = csLocale;

Available: en, cs, de, es, fr, it, ja, ko, nl, pl, pt, ru, sv, zh

For creating custom locales and date parsers, see the Localization guide.