Markers

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:

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:

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:

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