Markers

Overview
Line
Range
Text

Overview

You can add three types of markers to the timeline: line, range, and text.

They are defined as instances of the following classes:

To add markers, combine getTimeline() with the following methods:

The sections below explain in detail how to configure each type.

Line

To add a line marker, combine getTimeline() with lineMarker(). Specify the index of the marker:

var marker_1 = chart.getTimeline().lineMarker(0);
var marker_2 = chart.getTimeline().lineMarker(1);

To configure the marker, use methods of the anychart.core.axisMarkers.GanttLine class:

value() to set the date
stroke() to set the stroke
enabled() to enable / disable the marker

The value() method is required to set the date on which you want the marker to be displayed. You can either specify an exact date or use one of the enums from anychart.enums.GanttDateTimeMarkers:

start - the start date of the first data item
end - the end date of the last data item
current - the current date

In this sample, there are two line markers with the stroke configured:

// create two line markers
var marker_1 = chart.getTimeline().lineMarker(0);
var marker_2 = chart.getTimeline().lineMarker(1);

// set values of markers
marker_1.value("2018-01-25");
marker_2.value("end");

// set the stroke of markers
marker_1.stroke("2 #455a64");
marker_2.stroke("2 #dd2c00");

Playground

Range

To add a range marker, combine getTimeline() with rangeMarker(). Specify the index of the marker:

var marker_1 = chart.getTimeline().rangeMarker(0);
var marker_2 = chart.getTimeline().rangeMarker(1);

To configure the marker, use methods of the api:anychart.core.axisMarkers.GanttRange class:

from() to set the start date
to() to set the end date
fill() to set the stroke
enabled() to enable / disable the marker

The from() and to() methods are required to set the range of dates on which you want the marker to be displayed. You can either specify exact dates or use enums from anychart.enums.GanttDateTimeMarkers:

start - the start date of the first data item
end - the end date of the last data item
current - the current date

In this sample, there are two range markers with the fill configured:

// create two range markers
var marker_1 = chart.getTimeline().rangeMarker(0);
var marker_2 = chart.getTimeline().rangeMarker(1);

// set the range of the first marker
marker_1.from("2018-01-20");
marker_1.to("2018-01-25");

// set the range of the second marker
marker_2.from("2018-03-01");
marker_2.to("end");

// set the fill of markers
marker_1.fill("#455a64 0.2");
marker_2.fill("#dd2c00 0.2");

Playground

Text

To add a text marker, combine getTimeline() with textMarker(). Specify the index of the marker:

var marker_1 = chart.getTimeline().textMarker(0);
var marker_2 = chart.getTimeline().textMarker(1);

To configure the marker, use methods of the anychart.core.axisMarkers.GanttText class:

value() to set the date
text() to set the text
useHtml() to enable HTML
fontColor(), fontFamily(), fontSize(), fontWeight(), etc. to configure the font
background() to set the background
rotation(), padding(), offsetX(), offsetY(), etc. to set the position
enabled(), to enable / disable the marker

The value() method is required to set the date on which you want the marker to be displayed. You can either specify an exact date or use one of the enums from anychart.enums.GanttDateTimeMarkers:

start - the start date of the first data item
end - the end date of the last data item
current - the current date

In the following sample, there are two text markers with the font, background, and position configured. In the text of the first marker, HTML is used.

// create two text markers
var marker_1 = chart.getTimeline().textMarker(0);
var marker_2 = chart.getTimeline().textMarker(1);

// set values of markers
marker_1.value("2018-01-25");
marker_2.value("end");

// set the text of markers
marker_1.useHtml(true);
marker_1.text("marker <span style='font-size:26'>1</span>");
marker_2.text("marker 2");

// configure the font of markers
marker_1.fontColor("#455a64");
marker_2.fontColor("#dd2c00");
marker_1.fontWeight(600);
marker_2.fontWeight(600);

// configure the background of the first marker
marker_1.background().enabled(true);
marker_1.background().fill("#e3e8e8");
marker_1.background().stroke("2 #455a64");

// configure the position of markers
marker_1.rotation(0);
marker_1.padding(5)
marker_1.offsetY(31);
marker_2.offsetX(-10);

Playground