Labeling your chart

Welcome to the 'Labeling your chart' tutorial. In this guide you will learn how to:

  • How to use markup tags
  • Add axis captions.
  • Add a footer to your chart.
  • Add a header and a footer to the legend or disable the legend altogether.

How to use markup tags

While creating your first chart you already inserted a title with the command

.setTitle("Climate at Honolulu, Hawaii")

When working with text you can use some markup tags which you will probably recognize from HTML:

  • <em>
  • <b>
  • <i>
  • <h1>, <h2>, <h3>
  • <small>
  • <strong>
  • <br>
  • &nbsp;

So you can, for instance, extend your title to:

.setTitle("<h1>Climate at Honolulu, Hawaii</h1><br><h2>- Average climate data according to Wikipedia</h2>")

How to add axis captions

The axis caption is the descriptive text right next to the axes (“Temperature” on the left axis, “Precipitation” on the right axis). By default nothing is displayed. You can specify captions using the commands setAxisCaption(AxisIdentity, CaptionString)

.setAxisCaption(ac.AxisIdentity.Y_AXIS, "<h3>Temperature</h3>")
.setAxisCaption(ac.AxisIdentity.Y2_AXIS, "<h3>Precipitation</h3>")

ac.AxisIdentity identifies the axis to which the caption applies. Possible values are:

  • ac.AxisIdentity.X_AXIS - for the X-axis
  • ac.AxisIdentity.Y_AXIS - for the first Y-axis (usually the Y-axis on the left)
  • ac.AxisIdentity.Y2_AXIS - for the secondary Y-axis (usually the one on the right)

CaptionString identifies the string which will be displayed next to the axis.

How to add a footer to your chart

The footer is the short text below the chart area in the lower left corner of the chart. It is set with the command setFooterText( footerText ).

In the example below the footer includes a hyperlink and a <small> tag. All the markup tags listed earlier can be used here

new ac.ACLineChartBuilder()
    // ...
    .setFooterText('<small>Source: <a href="http://de.wikipedia.org/wiki/Hawaii#Klima">Wikipedia</a></small>')
    // ...

How to add more text to the legend

About legend entries in different chart types

The legend on the right hand side of the chart automatically displays a symbol that represents a column in your dataset in line charts and bar charts or a particular value in your pie chart. Next to the symbol the name you gave to this column or this value in your dataset is displayed.

Let´s just look at the data we used in the 'Your first pie chart' tutorial:

var myData = "Browser,Market Share\n"+
		"IE, 35.1\n"+
		"Firefox, 26.1\n"+
		"Google Chrome, 20.9\n"+
		"Safari, 6.0\n"+
		"Opera, 2.4\n"+
		"Other, 9.5\n";

If you use this data in a bar chart or a line chart, the whole column is displayed as a corresponding value set represented by a line or a set of bars/columns with the same color. So you only see one symbol in the legend with the label 'market share'. If you make it a pie chart, there will be six rows in the legend with the names of the browsers and the colors related to the pie slices.

Adding a header and footer to the legend

You can add more text above and below the legend entries with the command addLegendText('your text', LegendTextPosition)

.addLegendText("<h2>Legend:</h2>", ac.LegendTextPosition.TOP)
.addLegendText("<small>Browsers below a market share of 2% summarized as 'other'", ac.LegendTextPosition.BOTTOM)

As you can see, you can use the usual markup tags here. The result will look like this:

Removing the legend

As you can see, in this chart the legend shows the value names which are already displayed as labels on the pie slices. This can make the legend redundant. In other cases you may have a chart with only one line and you don´t need a legend since the chart header already describes which data is represented by the line (think of share prices, for example.) So you may need a command to disable the legend:

.setShowLegend(false)

setShowLegend(true) is enabled by default, so you don´t need to switch the legend on. So most probably you will only use the setShowLegend(false) entry.

Congratulations, you now know everything you need about placing additional texts and labels on your chart.