Title and Footer

The screenshot below shows the title and footer elements in a chart:

Adding a title and a footer to a chart

The example below adds a title and a footer to the chart. The footer contains a link to a website as a special element. The syntax is identical to what you would use in HTML.

new ac.ACLineChartBuilder()
    // ...
    .setTitle("This is my Title")
    .setFooterText('Source: <a href="http://en.wikipedia.org/wiki/Nuuk">Wikipedia</a>')
    // ...

Positioning

Positioning the title

Top and bottom

The title can be positioned at the top or the bottom of the chart using the setTitlePosition command:

new ac.ACLineChartBuilder()
    // ...
    .setTitlePosition(ac.TitlePosition.BOTTOM)
    // ...

Possible parameters for the title position are (prefix with ac. in the JavaScript version):

  • TitlePosition.BOTTOM
  • TitlePosition.TOP

Left, center and right

The title can be positioned horizontally using the setTitleTextAlignment method.

new ac.ACLineChartBuilder()
    // ...
    .setTitleTextAlignment(ac.HorizontalAlignment.CENTER)
    // ...

Possible parameters for the title position are (prefix with ac. in the JavaScript version):

  • HorizontalAlignment.LEFT (default)
  • HorizontalAlignment.CENTER
  • HorizontalAlignment.RIGHT

Positioning the footer

The footer is always placed at the bottom of the chart. You can define the horizontal alignment of the footer to be to the left, centered or to the right using the setFooterTextAlignment command:

new ac.ACLineChartBuilder()
    // ...
    .setFooterTextAlignment(ac.HorizontalAlignment.CENTER)
    // ...

Available parameters for footer alignment are (prefix with ac. in the JavaScript version):

  • HorizontalAlignment.LEFT
  • HorizontalAlignment.CENTER
  • HorizontalAlignment.RIGHT

Markup elements for title, footer (and most other elements where you can set text)

For text markup you can use the following tags, which will all be familiar to you from HTML:

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

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 have no effect in this case.

Custom markup elements

You can create custom markup elements. These have to be defined as part of the “style” of 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 shows how the custom markup element defined above is presented:

Using images within the title

Please refer to the using images section of this manual for more information on how to use images with your chart.

A chart's title can contain an image. Image files are added to a title with the setTitleImagUrl command.

Supported image formats:

  • jpg
  • gif (animated GIFs are not supported)
  • png

Due to the “same origin policy” of some browsers the images have to be located on the same server from which the main HTML-file has been loaded.

To include the image “flag_scotland_small.gif” in your chart title you would use this code:

new ac.ACLineChartBuilder()
    // ...
    .setTitle('Climate Loch Ness, Scotland')
    .setTitleImageUrl("flag_scotland_small.gif")
    // ...

There is also a version of setTitle that allows the title, title position and title image all to be set in one function call:

new ac.ACLineChartBuilder()
    // ...
    .setTitle('Climate Loch Ness, Scotland', ac.TitlePosition.TOP , 'flag_scotland_small.gif')
    // ...

Using hyperlinks in title and footer

Title and footer elements can contain hyperlinks. The tag syntax is the same as in HTML: <a> </a>.

new ac.ACLineChartBuilder()
    // ...
    .setTitle('Climate Loch Ness, <a href="http://en.wikipedia.org/wiki/Scotland"> Scotland</a>')
    // ...

The resulting title will look like this:

Changing hyperlink color and style

Hyperlinks are underlined by default. This cannot be changed. But the other style features such as color and font can be customized.

Style parameters are set in the theme file using a style variable. To change the color of a hyperlink to red, for example, you would use this code:

<?xml version="1.0" encoding="UTF-8"?>
<theme>
<variables>
   <variable type="style" name="a">
	<color>rgba( 255,0,0,1 )</color>
   </variable> 
</variables>
<!-- ... -->
</theme>

More information about the use of themes can be found in the using themes section of this manual.