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 chart.

To add custom text you need to create textMarker() and set value(), axis() and text().You may use other options, but previous three are mandatory.

  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");

Sample below shows several variants of Text Marker usage: marking up values (High, Low), describing values (Historical Maximum) and marking only selected values on certain 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.

Markers placement is controlled using align() parameter.

  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