Markup tags

Markup elements for titles, footers, axis captions (and most other elements for which you can set text)

Markup tags are used for text formatting. The basic principle is the same as in HTML. Markup tags can be employed in most cases where you set text. For example in title, footer, axis caption and legend elements. Although the examples here demonstrate the use of markup tags in the context of a specific text element (title element), they can be used in the same manner with the other elements mentioned above.

For text markup you can use the following tags which you will probably recognize from HTML:

  • <em>
  • <b>
  • <i>
  • <h1>, <h2>, <h3>
  • <small>
  • <strong>
  • <pre>
  • <br>
  • &nbsp;
  • Custom markup elements (see chapter below for further details)

Sample code:

new ac.ACLineChartBuilder()
    // ...
    .addLegendText("<h1>Heading1</h1>,<br> <h3>Heading 3 </h3>,<br><i>italic</i>,<br> <b>bold</b>,<br>normal Text,<br><strong>strong&nbsp;text</strong> <br><br><br>", ac.LegendTextPosition.TOP);
    // ...

This will result in a legend text as shown below.

Please note that in most predefined themes the title is set in the theme as bold by default. The <bold> tag will therefore have no effect.

Custom markup elements

You can create custom markup elements. These have to be defined as “style” within the theme. If you are not familiar with working with themes you can find an introduction here.

<variable type="style" name="MyCustomStyle">
	<fontFamily>DejaVuSans</fontFamily>
	<fontSize>14pt</fontSize>
	<fontWeight>bold</fontWeight>
	<color>rgba(255,50,0,1.0)</color>
</variable>

usage:

new ac.ACLineChartBuilder();
    // ...
    .setTitle("Title with <MyCustomStyle>Custom Style</MyCustomStyle> Element");
    // ...

The screenshot below presents the result of the custom markup element defined above: