Labels

Label related tutorials

Styling parts of text using <span>

The example below styles only part of the text

{
  label_text: 'Using label styling <span style="font-size: 18px; fill: crimson; font-weight: bold;">Styled span</span>'
}

Images in text using <img>

Images can be added to any labels

{
  label_text: '<img src="fileName.png" height=30 width=30 />'
}

List in text using <UL> <LI>

Nested UL, LI list tags can be used in any text labels.

{ label_text:'<ul><li>Item 1</li><li>Item2</li></ul>' }

Lists can be styled by wrapping them in span tags.

{ label_text:'<span style="listStyleType:none; listPadding:16;><ul><li>Item
1</li><li>Item2</li></ul></span>' }

Icons in text using <icon>

Icons can be specified inside any label text. They behave similarly to the html <img> tag within text. An example:

{
  label_text: '<icon name="linear/basic/paperplane" rotate="10" size="50" fill="#F2A">'
}

The full icon configuration api is available through the tag attributes. You can set deeper object properties by specifying a path delimited by underscores. For example:

{
  label_text: "<icon margin_top='5' ...>"
}

Quotes around attribute values are optional.

{
  label_text: "<icon size=15 ...>"
}

Since v3.3, you can define icon gradient fills and use color adjustment values defined in Series & Point Colors Tutorial such as 'lighten', 'darken', etc. within labels. The syntax for gradient fills is a comma delimited list of colors and optionally followed by an angle in degrees.

{
  label_text: "<icon fill=F2A,darken,45 ...>"
}

Please refer to the Icons Browser Sample to find available predefined icons. Alternatively, custom SVG paths can be specified with the path property and the chart will take care of everything else like scaling automatically.

Superscript and SubScript

The superscript <sup> and subscript <sub> are also supported within chart labels

To achieve E = mc²

{
  label_text: "E = mc<sup>2</sup>"
}

Label Styling

Label styling can be specified for any label on the chart. See the label.styling options for more information.