Theming & Localization

Built-in Themes

The histogram ships with four built-in themes. Set the theme via settings.theme.

LightHistogramTheme	Clean light theme (default). White background with subtle grid lines.
DarkHistogramTheme	Dark theme with a dark background, suitable for dark-mode UIs.
ModernHistogramTheme	Modern theme with default base styling.
ClassicHistogramTheme	Classic flat-color style with no gradients and no border radius.

import { LightHistogramTheme, DarkHistogramTheme,
         ClassicHistogramTheme } from '@timelinekit/core';

// Apply a theme
histogram.settings.theme = new DarkHistogramTheme();

// Create and customize a theme
const theme = new LightHistogramTheme();
theme.rowHeight = 80;
theme.histogram.barBorderRadius = 3;
histogram.settings.theme = theme;

Histogram Style Properties

Each theme contains a histogram property of type HistogramStyle with bar and area chart colors:

HistogramStyle

normalColor1: string	Gradient start color for bars within capacity.
normalColor2: string	Gradient end color for bars within capacity.
overAllocatedColor1: string	Gradient start color for bars exceeding capacity.
overAllocatedColor2: string	Gradient end color for bars exceeding capacity.
thresholdLineColor: string	Color of the capacity threshold line.
thresholdLineWidth: number	Width of the threshold line in pixels. Default: 1.
thresholdLineStyle: string	'solid' \| 'dashed' \| 'dotted'. Default: 'dashed'.
barBorderRadius: number	Border radius of histogram bars. Default: 1.
scaleFactor: number	Scale factor — 1.5 means 100% capacity = 2/3 of row height. Default: 1.5.
areaColor: string	Fill color for area mode (normal utilization).
areaLineColor: string	Stroke color for area mode line (normal).
areaOverAllocatedColor: string	Fill color for area mode (over-allocated region).
areaOverAllocatedLineColor: string	Stroke color for area mode line (over-allocated).

// Customize bar colors
const theme = new LightHistogramTheme();
theme.histogram.normalColor1 = '#88bbee';
theme.histogram.normalColor2 = '#5588cc';
theme.histogram.overAllocatedColor1 = '#ee8888';
theme.histogram.overAllocatedColor2 = '#cc5555';
theme.histogram.scaleFactor = 1.2; // bars fill more of the row
histogram.settings.theme = theme;

For comprehensive theming documentation covering sheet, chart header, grid lines, tooltips, and more, see the Theming & Styles guide.

Localization

Set the locale to change the language of the histogram UI — column headers, tooltips, and date formatting.

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

// Use a built-in locale
histogram.settings.locale = deLocale;

// Or customize specific histogram strings
const locale = { ...deLocale };
locale.histogram = {
  ...deLocale.histogram,
  resource: 'Ressource',
  utilization: 'Auslastung',
  capacity: 'Kapazität',
  peak: 'Spitze',
  aggregate: 'Gesamt',
  date: 'Datum',
};
histogram.settings.locale = locale;

For the full list of available locales and customization options, see the Localization guide.