Header

• Overview
• Levels
  • All Levels
  • Individual Levels
• Appearance
• Text Format
  • Tokens
  • Formatting Functions
• Level Height

Overview

The header is a component on the top of the timeline, representing its scale and defined as an instance of the anychart.core.gantt.TimeLineHeader class. To access it, combine getTimeline() with header().

You can configure either all levels of the header at once or an individual level. In particular, the appearance, text format, and level height settings are available.

Levels

Each level of the header represents a time unit. Levels are shown in a specific order: from the level with the smallest unit at the bottom to the level with the largest one at the top.

By default, there are three levels, each of them representing a time unit. The exact set of units depends on your data. To change the number of levels and show other time units, you should adjust the scale of the timeline, as explained in Scale: Levels.

Other settings can be applied either to all levels of the header or to an individual level - see the sections below to learn more.

All Levels

To configure all levels, access the header by combining getTimeline() with header().

Then use methods of anychart.core.gantt.TimeLineHeader - for example, enabled(), which allows enabling or disabling the header.

In the sample below, the background stroke is set for all levels (other appearance settings are shown in Appearance):

// configure the timeline header
var header = chart.getTimeline().header();
header.background().stroke("3 #455a64");

Individual Levels

To access an individual level, combine getTimeline() with header() and level(). Specify the index of the level.

Note: Levels are numbered automatically from the level with the smallest time unit to the level with the largest one. The default levels are assigned the indexes 0, 1, 2.

Levels are defined as instances of anychart.core.gantt.TimeLineHeader.LevelWrapper. To configure them, use methods of this class - for example, enabled(), which allows enabling or disabling a level.

In this sample, the background stroke is set only for the first level (other appearance settings are shown in Appearance):

// configure the first level of the timeline header
var header = chart.getTimeline().header();
header.level(0).background().stroke("3 #455a64");

Appearance

To configure the appearance of all levels, use these methods:

• background(), fill() and stroke() to set the background, fill, and stroke
• fontColor(), fontWeight(), fontSize(), fontFamily(), etc. to configure the font

Note: You can also set the fill of the data grid header - see Data Grid: Apperance.

Here is a Gantt chart with the appearance of the timeline header adjusted:

// configure the timeline header
var header = chart.getTimeline().header();
header.fill("#64b5f6 0.2");
header.stroke("#64b5f6");
header.fontColor("#64b5f6");
header.fontWeight(600);

To adjust individual levels, use the following methods:

• background(), fill(), and stroke to set the background, fill, and stroke
• fontColor(), fontWeight(), fontSize(), fontFamily(), etc. to configure the font

// configure the first level of the timeline header
var header = chart.getTimeline().header();
header.level(0).fill("#64b5f6 0.2");
header.level(0).stroke("#64b5f6");
header.level(0).fontColor("#64b5f6");
header.level(0).fontWeight(600);

Text Format

The format() method of the header allows you to format the text of all levels.

To configure an individual level, use the format() method of the level.

Combine these methods either with tokens or with formatting functions.

Note: To learn more about formatting dates, see Date and Time Formats: format().

Tokens

The available tokens include:

• {%value} - the name of the column
• {%endValue} - the name of the next column
• {%tickValue} - the start timestamp of the column
• {%end} - the start timestamp of the next column

The following sample shows how to format the text of all levels simultaneously:

// configure the timeline header
var header = chart.getTimeline().header();
header.format("{%value}-{%endValue}");

This sample shows how to adjust individual levels - each of the three default levels has its own format:

// configure the levels of the timeline header
var header = chart.getTimeline().header();
header.level(0).format("{%tickValue}{dateTimeFormat:dd MMM}");
header.level(1).format("{%value}");
header.level(2).format("{%value}-{%endValue}");

Formatting Functions

In formatting functions, the following fields are available:

• value - the name of the column
• endValue - the name of the next column
• tickValue - the start timestamp of the column
• end - the start timestamp of the next column

The sample below shows how to format the text of all levels at once:

// configure the timeline header
var header = chart.getTimeline().header();
header.format(function() {
  var duration = (this.end - this.tickValue) / 1000 / 3600 / 24;
  return this.value + ": " + duration + " days"
});

In this sample an individual level is adjusted - the one representing months:

// configure the first level of the timeline header
var header = chart.getTimeline().header();
header.level(0).format(function() {
  var duration = (this.end - this.tickValue) / 1000 / 3600 / 24;
  return this.value + ": " + duration + " days"
});

Level Height

You can change the height of an individual level by using the height() method.

Note: To learn how to set the height of the entire header, see Basic Settings: Header and Row Height.

In the following sample, the height of the first level is configured, which makes the height of others automatically adjust:

// configure the first level of the timeline header
var header = chart.getTimeline().header();
header.level(0).height(35);