Labels

Chart Tutorials  

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 and 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 type api is available through the tag attributes. For deeper property settings the same shortcut syntax as can be used as in chart config, for example:

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

Quotes around attribute values are optional.

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

Please refer to the icon 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 = mc2

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

PageDescription
Data LabelsLabel and Token usage.
Formatting labelsFeatures that allow formatting labels and values within labels.
ExpressionsCreate dynamic labels using expressions.
Token ReferenceTokens available to create dynamic label content.