TimelineKit

Theming & Styles

Customize every visual aspect of the Gantt Chart — colors, fonts, task bars, milestones, grid lines, and more.

All examples use gantt as shorthand for the component instance — i.e. ref.current in React or this.ganttChart in Angular.

Built-in Themes

TimelineKit ships with four built-in themes. Each theme sets colors, fonts, task bar styles, and grid appearance.

LightGanttChartThemeClean, minimal light theme with subtle borders and rounded task bars. Default.
DarkGanttChartThemeDark background (VS Code-inspired) with muted task colors and rounded bars.
ModernGanttChartThemeBase defaults with no extra styling — a blank canvas for customization.
ClassicGanttChartThemeTraditional Gantt look — flat task bars with visible borders and thin progress bars.
import { DarkGanttChartTheme } from '@timelinekit/core';

// Apply a built-in theme
gantt.settings.theme = new DarkGanttChartTheme();

Changing the theme at runtime re-renders the entire chart immediately. You can switch themes as often as needed.

Custom Theme

To customize a theme, create an instance of any built-in theme and override the properties you want to change. You don't need to subclass — just mutate the theme object before applying it.

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

const theme = new LightGanttChartTheme();

// Customize individual properties
theme.rowHeight = 36;
theme.font.name = 'Inter';
theme.font.size = 12;
theme.chart.content.taskBorderRadius = 8;
theme.chart.content.taskHeight = 20;

gantt.settings.theme = theme;

You can also extend a theme class for reuse:

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

class MyTheme extends LightGanttChartTheme {
  constructor() {
    super();
    this.rowHeight = 36;
    this.font.name = 'Inter';
    this.chart.content.taskBorderRadius = 8;
  }
}

gantt.settings.theme = new MyTheme();

Theme Structure

A theme is organized into three main areas: top-level properties, the sheet (left-side table), and the chart (right-side timeline). The chart is further divided into header (time axis) and content (task area).

theme                       // GanttChartTheme
├── font                    // Font (name, size, weight, italic)
├── rowHeight               // number (default: 30)
├── headerHeight            // number (default: 50)
├── sheet                   // BaseSheetStyle
│   ├── header              // BaseSheetHeaderStyle
│   └── (cell/grid styles)
└── chart                   // GanttChartChartStyle
    ├── header              // BaseChartHeaderStyle
    └── content             // GanttChartContentStyle
        ├── taskColors[]    // GanttChartTaskColor[]
        └── (all visual properties)

Top-level Properties

font: FontGlobal font. Properties: name (default: 'Arial'), size (default: 11), weight, italic.
rowHeight: numberHeight of each row in pixels. Default: 30.
headerHeight: numberHeight of the header area in pixels. Default: 50.
theme.font.name = 'Inter';
theme.font.size = 12;
theme.font.weight = 600;
theme.rowHeight = 36;
theme.headerHeight = 56;

Sheet (Table) Styles

Controls the appearance of the left-side data grid.

Header

sheet.header.backgroundColorBackground color of the column header row.
sheet.header.cellBorderColorBorder color between header cells.
sheet.header.cellDividerColorDivider line color (falls back to cellBorderColor if null).
sheet.header.textColorText color of column headers.

Body

sheet.backgroundColorBackground color of the data area.
sheet.textColorDefault text color.
sheet.gridLineColorHorizontal/vertical grid line color.
sheet.hoverBackgroundColorBackground color when hovering a row.
sheet.selectedBackgroundColorBackground color of selected rows.
sheet.selectedRowHeaderColorRow header color for selected rows.
sheet.focusBorderColorBorder color of the focused cell.
sheet.highlightBorderColorBorder color for cell highlighting.
sheet.treeIconColorColor of expand/collapse tree icons.
sheet.editorBackgroundColorBackground color of inline cell editors.
sheet.editorTextColorText color of inline cell editors.
sheet.scrollbarThumbColorScrollbar thumb color.
sheet.scrollbarTrackColorScrollbar track color.
sheet.colorScheme'light' or 'dark'. Affects native UI elements.
theme.sheet.backgroundColor = '#fafafa';
theme.sheet.selectedBackgroundColor = '#e8f0ff';
theme.sheet.focusBorderColor = '#2563eb';
theme.sheet.gridLineColor = '#eee';

Chart Header (Time Axis)

chart.header.backgroundColorBackground of the time axis header.
chart.header.cellBorderColorBorder between time cells.
chart.header.cellDividerColorDivider color (null falls back to border).
chart.header.cellDividerPaddingVertical padding of dividers in pixels. Default: 0.
chart.header.textColorText color of time labels.

Chart Content

Controls the appearance of everything inside the chart area — task bars, summaries, milestones, links, grid, and more.

Background & Grid

chart.content.backgroundColorBackground color of the chart area.
chart.content.gridLineColorVertical/horizontal grid line color.
chart.content.tier2SeparatorLineStyleColor of the major time scale separator.
chart.content.nonWorkingTimeStyleBackground color for non-working time (weekends, holidays).

Task Bar Styling

Task Dimensions & Shape

chart.content.taskHeightHeight of task bars in pixels. Default: 16.
chart.content.taskBorderRadiusCorner radius of task bars. Default: 0. Set to 4+ for rounded bars.
chart.content.taskProgressHeightHeight of the progress fill inside tasks. Default: 16 (full height).
chart.content.linkLineStyle'sharp' (right-angle) or 'rounded' (smooth curves). Default: 'sharp'.
// Rounded, taller task bars
theme.chart.content.taskHeight = 22;
theme.chart.content.taskBorderRadius = 6;
theme.chart.content.taskProgressHeight = 22;
theme.chart.content.linkLineStyle = 'rounded';

Task Colors

Each theme defines an array of taskColors. A task's color property (0–7) selects the color set by index. The default themes provide 8 color sets: blue (0), red (1), green (2), yellow (3), purple (4), orange (5), teal (6), pink (7).

GanttChartTaskColor properties

color1Primary fill color (top/main gradient stop).
color2Secondary fill color (bottom gradient stop).
borderColorTask bar border. null = no border.
highlightColorOverlay color when hovering a task.
progressColor1Primary progress fill color.
progressColor2Secondary progress fill color.
progressHighlightColorProgress hover overlay.
separatorColorColor of the line between split task parts.
linkLineColorColor of dependency lines from this task.
linkArrowColorColor of dependency arrow heads from this task.
import { GanttChartTaskColor, LightGanttChartTheme } from '@timelinekit/core';

const theme = new LightGanttChartTheme();

// Override the first color set (index 0 — blue)
const blue = theme.chart.content.taskColors[0];
blue.color1 = '#dbeafe';
blue.color2 = '#93c5fd';
blue.progressColor1 = '#60a5fa';
blue.progressColor2 = '#3b82f6';
blue.linkLineColor = '#3b82f6';
blue.linkArrowColor = '#3b82f6';

// Add a completely new color set
const custom = new GanttChartTaskColor();
custom.color1 = '#fef3c7';
custom.color2 = '#fcd34d';
custom.progressColor1 = '#f59e0b';
custom.progressColor2 = '#d97706';
custom.linkLineColor = '#d97706';
custom.linkArrowColor = '#d97706';
theme.chart.content.taskColors.push(custom); // index 8

gantt.settings.theme = theme;

To use a custom color set, assign the index to a task: task.color = 8;

Summary & Milestone Styling

Summary Tasks

chart.content.summaryHeightHeight of summary bars. Default: 16.
chart.content.summaryColor1 / summaryColor2Gradient fill of summary bars.
chart.content.summaryProgressColor1 / summaryProgressColor2Progress fill of summary bars.
chart.content.summaryBorderColorBorder around summary bars. null = no border.
chart.content.summaryHighlightColorHover overlay for summary bars.
chart.content.summaryMarkWidthWidth of end marks (bracket) in pixels. Default: 14.
chart.content.summaryMarkType'half' (bracket at bottom) or 'full' (full-height bracket). Default: 'half'.
chart.content.summaryMarkColor1 / summaryMarkColor2Fill of end marks.
chart.content.summaryMarkProgressColor1 / summaryMarkProgressColor2Progress fill of end marks.
chart.content.summaryProgressHeightHeight of summary progress fill. Default: 16.

Milestones

chart.content.milestoneSizeSize of milestone diamonds in pixels. Default: 16.
chart.content.milestoneColor1 / milestoneColor2Gradient fill of milestone diamonds.
chart.content.milestoneBorderColorBorder around milestones. null = no border.
chart.content.milestoneHighlightColorHover overlay for milestones.
// Larger milestones with a custom color
theme.chart.content.milestoneSize = 20;
theme.chart.content.milestoneColor1 = '#fbbf24';
theme.chart.content.milestoneColor2 = '#d97706';
theme.chart.content.milestoneBorderColor = '#b45309';

Baseline Styling

When a baseline is shown, ghost bars appear behind current task bars showing the original schedule.

chart.content.baselineColorFill color of baseline bars. Default: '#d8d8d8'.
chart.content.baselineHeightHeight of baseline bars. Default: 6.
chart.content.baselineSummaryHeightHeight of baseline summary bars. Default: 8.
chart.content.baselineMilestoneSizeSize of baseline milestone diamonds. Default: 8.
chart.content.baselineOffsetVertical offset below the main bar. Default: 3.
chart.content.baselineBorderRadiusCorner radius of baseline bars. Default: 1.
theme.chart.content.baselineColor = '#bfdbfe';
theme.chart.content.baselineHeight = 8;
theme.chart.content.baselineOffset = 4;

Critical Path Styling

When the critical path is enabled, tasks on the critical path get a colored border overlay.

chart.content.criticalTaskBorderColorBorder color for critical tasks. Default: '#cc0000'.
chart.content.criticalTaskBorderWidthBorder width for critical tasks. Default: 2.
chart.content.criticalMilestoneBorderColorBorder color for critical milestones.
chart.content.criticalSummaryBorderColorBorder color for critical summary tasks.
theme.chart.content.criticalTaskBorderColor = '#dc2626';
theme.chart.content.criticalTaskBorderWidth = 3;
theme.chart.content.criticalMilestoneBorderColor = '#dc2626';
theme.chart.content.criticalSummaryBorderColor = '#dc2626';

Today Line & Markers

Today Line

chart.content.todayLineColorColor of the today indicator line. Default: '#555555'.
chart.content.todayLineWidthWidth of the today line in pixels. Default: 1.
chart.content.todayLineStyle'solid', 'dashed', or 'dotted'. Default: 'dotted'.

Markers

These are the default styles for markers. Individual markers can override color, lineWidth, and lineStyle via the Marker API.

chart.content.markerLineColorDefault line color. Default: '#555555'.
chart.content.markerLineWidthDefault line width. Default: 1.
chart.content.markerLineStyle'solid', 'dashed', or 'dotted'. Default: 'dotted'.
chart.content.markerLabelColorLabel text color. Default: '#555555'.
chart.content.markerLabelFontLabel font. Default: 9pt.
theme.chart.content.todayLineColor = '#ef4444';
theme.chart.content.todayLineStyle = 'solid';
theme.chart.content.todayLineWidth = 2;

theme.chart.content.markerLineColor = '#3b82f6';
theme.chart.content.markerLineStyle = 'dashed';

Task Labels

Display text labels on or next to task bars. Labels are configured separately for tasks, summaries, and milestones.

Label Position

'none'No label displayed. Default.
'inside'Label rendered inside the task bar (truncated if it doesn't fit).
'right'Label rendered to the right of the task bar.
'insideOrRight'Inside if it fits, otherwise to the right.

Label Content

'name'Task name.
'resource'Assigned resource names.
'progress'Progress percentage (e.g. '75%').
'nameAndProgress'Name and progress (e.g. 'Design 75%').
'nameAndResource'Name and resource (e.g. 'Design — Alice').

Label Style Properties

chart.content.taskLabelPositionPosition for regular tasks.
chart.content.taskLabelContentContent for regular tasks.
chart.content.taskLabelColorText color for task labels.
chart.content.taskLabelFontFont for task labels.
chart.content.taskLabelPaddingPadding inside the bar. Default: 4.
chart.content.taskLabelOutsideMarginGap between bar and right label. Default: 6.
chart.content.summaryLabelPositionPosition for summary tasks.
chart.content.summaryLabelContentContent for summary tasks.
chart.content.summaryLabelColorText color for summary labels.
chart.content.milestoneLabelPosition'none' or 'right'. Milestones don't support 'inside'.
chart.content.milestoneLabelContentContent for milestone labels.
chart.content.milestoneLabelColorText color for milestone labels.
// Show task names inside (or right if too narrow)
theme.chart.content.taskLabelPosition = 'insideOrRight';
theme.chart.content.taskLabelContent = 'nameAndProgress';
theme.chart.content.taskLabelColor = '#374151';

// Summary: show name to the right
theme.chart.content.summaryLabelPosition = 'right';
theme.chart.content.summaryLabelContent = 'name';

// Milestones: show name to the right
theme.chart.content.milestoneLabelPosition = 'right';
theme.chart.content.milestoneLabelContent = 'name';

gantt.settings.theme = theme;

Tooltip Styling

When users hover over a task bar, a tooltip shows task details.

chart.content.tooltipFontFont for tooltip text. Default: 10pt.
chart.content.tooltipTextColorText color. Default: '#606060'.
chart.content.tooltipBackgroundColor1Primary background color. Default: '#ffffff'.
chart.content.tooltipBackgroundColor2Secondary background (alternating rows). Default: '#f4f4f4'.
chart.content.tooltipBorderColorBorder color. Default: '#606060'.

Full Example

A complete example that creates a branded theme:

import { LightGanttChartTheme, GanttChartTaskColor } from '@timelinekit/core';

const theme = new LightGanttChartTheme();

// Font & dimensions
theme.font.name = 'Inter';
theme.font.size = 12;
theme.rowHeight = 36;

// Task bars: rounded, taller
theme.chart.content.taskHeight = 22;
theme.chart.content.taskBorderRadius = 6;
theme.chart.content.taskProgressHeight = 22;
theme.chart.content.linkLineStyle = 'rounded';

// Brand color for the default task bar (index 0)
const brandColor = theme.chart.content.taskColors[0];
brandColor.color1 = '#dbeafe';
brandColor.color2 = '#93c5fd';
brandColor.progressColor1 = '#3b82f6';
brandColor.progressColor2 = '#2563eb';
brandColor.linkLineColor = '#2563eb';
brandColor.linkArrowColor = '#2563eb';

// Labels: show name + progress inside task bars
theme.chart.content.taskLabelPosition = 'insideOrRight';
theme.chart.content.taskLabelContent = 'nameAndProgress';
theme.chart.content.summaryLabelPosition = 'right';
theme.chart.content.summaryLabelContent = 'name';
theme.chart.content.milestoneLabelPosition = 'right';
theme.chart.content.milestoneLabelContent = 'name';

// Today line
theme.chart.content.todayLineColor = '#ef4444';
theme.chart.content.todayLineStyle = 'solid';

gantt.settings.theme = theme;