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.

LightGanttChartTheme	Clean, minimal light theme with subtle borders and rounded task bars. Default.
DarkGanttChartTheme	Dark background (VS Code-inspired) with muted task colors and rounded bars.
ModernGanttChartTheme	Base defaults with no extra styling — a blank canvas for customization.
ClassicGanttChartTheme	Traditional 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: Font	Global font. Properties: name (default: 'Arial'), size (default: 11), weight, italic.
rowHeight: number	Height of each row in pixels. Default: 30.
headerHeight: number	Height 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.backgroundColor	Background color of the column header row.
sheet.header.cellBorderColor	Border color between header cells.
sheet.header.cellDividerColor	Divider line color (falls back to cellBorderColor if null).
sheet.header.textColor	Text color of column headers.

Body

sheet.backgroundColor	Background color of the data area.
sheet.textColor	Default text color.
sheet.gridLineColor	Horizontal/vertical grid line color.
sheet.hoverBackgroundColor	Background color when hovering a row.
sheet.selectedBackgroundColor	Background color of selected rows.
sheet.selectedRowHeaderColor	Row header color for selected rows.
sheet.focusBorderColor	Border color of the focused cell.
sheet.highlightBorderColor	Border color for cell highlighting.
sheet.treeIconColor	Color of expand/collapse tree icons.
sheet.editorBackgroundColor	Background color of inline cell editors.
sheet.editorTextColor	Text color of inline cell editors.
sheet.scrollbarThumbColor	Scrollbar thumb color.
sheet.scrollbarTrackColor	Scrollbar 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.backgroundColor	Background of the time axis header.
chart.header.cellBorderColor	Border between time cells.
chart.header.cellDividerColor	Divider color (null falls back to border).
chart.header.cellDividerPadding	Vertical padding of dividers in pixels. Default: 0.
chart.header.textColor	Text 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.backgroundColor	Background color of the chart area.
chart.content.gridLineColor	Vertical/horizontal grid line color.
chart.content.tier2SeparatorLineStyle	Color of the major time scale separator.
chart.content.nonWorkingTimeStyle	Background color for non-working time (weekends, holidays).

Task Bar Styling

Task Dimensions & Shape

chart.content.taskHeight	Height of task bars in pixels. Default: 16.
chart.content.taskBorderRadius	Corner radius of task bars. Default: 0. Set to 4+ for rounded bars.
chart.content.taskProgressHeight	Height 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

color1	Primary fill color (top/main gradient stop).
color2	Secondary fill color (bottom gradient stop).
borderColor	Task bar border. null = no border.
highlightColor	Overlay color when hovering a task.
progressColor1	Primary progress fill color.
progressColor2	Secondary progress fill color.
progressHighlightColor	Progress hover overlay.
separatorColor	Color of the line between split task parts.
linkLineColor	Color of dependency lines from this task.
linkArrowColor	Color 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.summaryHeight	Height of summary bars. Default: 16.
chart.content.summaryColor1 / summaryColor2	Gradient fill of summary bars.
chart.content.summaryProgressColor1 / summaryProgressColor2	Progress fill of summary bars.
chart.content.summaryBorderColor	Border around summary bars. null = no border.
chart.content.summaryHighlightColor	Hover overlay for summary bars.
chart.content.summaryMarkWidth	Width 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 / summaryMarkColor2	Fill of end marks.
chart.content.summaryMarkProgressColor1 / summaryMarkProgressColor2	Progress fill of end marks.
chart.content.summaryProgressHeight	Height of summary progress fill. Default: 16.

Milestones

chart.content.milestoneSize	Size of milestone diamonds in pixels. Default: 16.
chart.content.milestoneColor1 / milestoneColor2	Gradient fill of milestone diamonds.
chart.content.milestoneBorderColor	Border around milestones. null = no border.
chart.content.milestoneHighlightColor	Hover 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';

Dependency Links

Link line and arrow colors are part of each task color set. There are also global settings for links originating from milestones and connector dots.

chart.content.linkLineStyle	'sharp' or 'rounded'. Applies to all links globally.
chart.content.linkFromMilestoneLineColor	Line color for links from milestones.
chart.content.linkFromMilestoneArrowColor	Arrow color for links from milestones.
chart.content.connectorDotRadius	Radius of connector dots in pixels. Default: 7.
chart.content.connectorDotColor	Fill color of connector dots. Default: '#4a90d9'.
chart.content.connectorDotBorderColor	Border color of connector dots.
chart.content.connectorDotHoverColor	Color when hovering a connector dot.

Baseline Styling

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

chart.content.baselineColor	Fill color of baseline bars. Default: '#d8d8d8'.
chart.content.baselineHeight	Height of baseline bars. Default: 6.
chart.content.baselineSummaryHeight	Height of baseline summary bars. Default: 8.
chart.content.baselineMilestoneSize	Size of baseline milestone diamonds. Default: 8.
chart.content.baselineOffset	Vertical offset below the main bar. Default: 3.
chart.content.baselineBorderRadius	Corner 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.criticalTaskBorderColor	Border color for critical tasks. Default: '#cc0000'.
chart.content.criticalTaskBorderWidth	Border width for critical tasks. Default: 2.
chart.content.criticalMilestoneBorderColor	Border color for critical milestones.
chart.content.criticalSummaryBorderColor	Border 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.todayLineColor	Color of the today indicator line. Default: '#555555'.
chart.content.todayLineWidth	Width 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.markerLineColor	Default line color. Default: '#555555'.
chart.content.markerLineWidth	Default line width. Default: 1.
chart.content.markerLineStyle	'solid', 'dashed', or 'dotted'. Default: 'dotted'.
chart.content.markerLabelColor	Label text color. Default: '#555555'.
chart.content.markerLabelFont	Label 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.taskLabelPosition	Position for regular tasks.
chart.content.taskLabelContent	Content for regular tasks.
chart.content.taskLabelColor	Text color for task labels.
chart.content.taskLabelFont	Font for task labels.
chart.content.taskLabelPadding	Padding inside the bar. Default: 4.
chart.content.taskLabelOutsideMargin	Gap between bar and right label. Default: 6.
chart.content.summaryLabelPosition	Position for summary tasks.
chart.content.summaryLabelContent	Content for summary tasks.
chart.content.summaryLabelColor	Text color for summary labels.
chart.content.milestoneLabelPosition	'none' or 'right'. Milestones don't support 'inside'.
chart.content.milestoneLabelContent	Content for milestone labels.
chart.content.milestoneLabelColor	Text 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.tooltipFont	Font for tooltip text. Default: 10pt.
chart.content.tooltipTextColor	Text color. Default: '#606060'.
chart.content.tooltipBackgroundColor1	Primary background color. Default: '#ffffff'.
chart.content.tooltipBackgroundColor2	Secondary background (alternating rows). Default: '#f4f4f4'.
chart.content.tooltipBorderColor	Border 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;