Legend Items

Overview
Text Font
Text Format
- Tokens
- Formatting Functions
Icons
- Size
Spacing
Order

Overview

This article explains how to adjust legend items. You can set their text font, text format, the size of icons, and so on - combine the legend() method of the chart with methods of the anychart.core.ui.Legend class that affect items.

Please note that the settings listed in this article are applied to all items at once. If you need to configure items individually, see the Individual Legend Items article.

Text Font

You can configure the font of legend items by using the following methods:

fontColor() to set the font color
fontFamily() to set the font family - Verdana, Helvetica, Arial, etc.
fontSize() to set the font size
fontStyle() to set the font style - normal, italic, oblique
fontVariant() to set the font variant - normal or small caps
fontWeight() to set the font weight
other methods from anychart.core.ui.Legend

// configure the font of legend items
chart.legend().fontColor("#455a64");
chart.legend().fontSize(16);
chart.legend().fontWeight(600);

Playground

Text Format

To set the text format of legend items, use the itemsFormat() method with either tokens or formatting functions. Which settings are available depends on the series type and whether the chart type is single-series or multiple-series.

You can also call the useHtml() method to enable HTML for the legend text.

Tokens

If the chart type allows adding multiple series, each legend item represents a series. In this case, you can use the {%seriesName} token, which is always available, and other series-related (not point-related) tokens supported by the given series type.

For example, here the {%seriesName} and {%seriesYSum} tokens are used to configure the legend text of a multiple-series Line chart:

// enable html for the legend
chart.legend().useHtml(true);

// configure the format of legend items
chart.legend().itemsFormat(
  "<span style='color:#455a64;font-weight:600'>{%seriesName}:</span> ${%seriesYSum}"
);

Playground

Each legend item of a single-series chart type is linked to a chart point, so you can use tokens representing the values of the points. The exact set of the tokens available depends on the chart type.

In the following sample, the {%x}, {%value}, and {%percentValue} tokens are used to configure the legend text of a Pie chart:

// enable html for the legend
chart.legend().useHtml(true);

// configure the format of legend items
chart.legend().itemsFormat(
  "<span style='color:#455a64;font-weight:600'>{%x}:</span> ${%value}"
);

Playground

Formatting Functions

Legend items of multiple-series charts represent series, so you can use formatting functions with the series field, allowing you to access methods of the series.

In this sample, a formatting function is used to get the colors, names, and total values of Line series by accessing the color(), name(), and getStat() methods:

// enable html for the legend
chart.legend().useHtml(true);

// configure the format of legend items
chart.legend().itemsFormat(function() {
  return "<span style='color:" + this.series.color() + ";font-weight:600'>" +
         this.series.name() + "</span>: $" + this.series.getStat("sum");
});

Playground

Legend items of single-series charts represent points, so you can use formatting functions with the point-related fields supported by the given chart type.

In the sample below, the x and value, and index fields are used to configure the legend of a Pie chart. The index field, which represents the index of the point, is combined with the getPoint() method of the chart to access the getStat() method of the point:

// enable html for the legend
chart.legend().useHtml(true);

// configure the format of legend items
chart.legend().itemsFormat(function() {
  var point = chart.getPoint(this.index);
  var maxPoint = chart.getStat("max");
  var percent = point.getStat("percentValue").toFixed(1);
  if (point.get("value") == maxPoint) {
    return "<span style='color:#455a64;font-weight:600'>" +
           this.x + ": " + percent + "%</span>";
  } else {
    return this.x + "</span>: " + percent + "%";
  }
});

Playground

Icons

Most settings of the legend icons (for example, their colors and types), can be configured only individually for each icon - see the Icons and Icon Markers sections of the Individual Legend Items article. Also, you can use themes, which is an alternative way to customize the legend, including its icons.

Size

To set the size of legend icons, call the iconSize() method:

// set the size of legend icons
chart.legend().iconSize(20);

Playground

Spacing

The itemsSpacing() and iconTextSpacing() methods allow setting the spacing between legend items and between the icon and text of each item:

// set the spacing between legend items
chart.legend().itemsSpacing(50);

// set the spacing between legend icons and text
chart.legend().iconTextSpacing(15);

Playground

Order

The default order of legend items depends on the chart type. You can invert it with the help of the inverted() method:

// set the order of legend items
chart.legend().inverted(true);

Playground