Text Markers

Overview
Declare
Settings

Overview

Text Markers are useful when you want to place custom texts or description with or instead of axes values labels. You can add text markers to any place of a chart. You can also place Range Markers to show Ranges and Line Markers to show Lines.

Declare

These text markers are just custom text placed on a chart.

To add custom text you need to create textMarker() and set value(), axis() and text().

var textMarker = chart.textMarker();
textMarker.axis(chart.yAxis());
textMarker.value(18000);
textMarker.align("left");
textMarker.anchor("leftcenter");
textMarker.fontSize(12);
textMarker.fontColor("#212121");
textMarker.offsetX(5);
textMarker.text("Historical Maximum");
textMarker.background().enabled(true);
textMarker.background().stroke("1 gray");
textMarker.background().fill("gray 0.1");
textMarker.padding(3);

Sample below shows several variants of Text Markers: marking up values (High, Low), describing values (Historical Maximum) and marking values on an axis (8.00).

Playground

Settings

You can configure text marker placement, font, anchor and text of any custom text using value(), align(), anchor(), fontSize(), offsetX(), offsetY(), text() methods.

var textMarker = chart.textMarker();
textMarker.axis(chart.yAxis());
textMarker.value(13);
textMarker.text("Align: right");
textMarker.align("right");
textMarker.offsetX(5);
textMarker.fontColor("#212121");
textMarker.anchor("rightcenter");

In the sample below you can see different text markers positions and text formatting:

Playground