Still have questions?
Contact support
You are looking at an outdated 7.11.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Legend

Overview

Legend is a table on a chart listing and explaining the symbols and colors used and with additional information that helps user to understand a chart.

In this article all legends features and setting are explained and demonstrated.

Auto Legend

To enable legend you have to specify enabled(true) parameter of legend() method:

// create chart
var chart = anychart.line();

// enable legend
var legend = chart.legend();
legend.enabled(true);

By default legend shows all series names with a symbol that shows the color and the type of the series.

To enable such legend in your chart just enable it:

chart.legend(true);

In the live sample, please notice that when you move the mouse over the series name in legend - all series elements are highlighted

JsFiddle Playground

Easy Auto Legend for Single Series Charts

If you are showing a single series chart and want your legend to show all points names and values you should configure legend:

var legend = chart.legend();
// enable legend
legend.enabled(true);
// set source of legend items
legend.itemsSourceMode("categories");

To create a legend for single series chart you just have to set categories value for itemsSourceMode().

JsFiddle Playground

Title

Sometimes you need the title to a legend and sometimes it is superfluous: to enable legend title you have to set enabled(true) parameter of a legend title method as it is shown below

var title = chart.legend().title();
title.enabled(true);

To specify and format your own title for the legend use text() method of a title(). For more information about title settings please refer to the Title article.

var title = chart.legend().title();
title.useHtml(true);

// enables legend title
title.enabled(true);
title.text("Total sales<br><i style=\"color: #999; font-weight: 400; font-size: 11px;\">(Year 2004)</i>");

// set font size
title.fontSize(14);
title.hAlign("center");

Here is a sample bar chart and the legend has tuned title:

JsFiddle Playground

Positioning

Depending on the layout and type of your chart you can position legend to a desired place using position() method of legend().

As an addition to the position() method, method align() controls legend alignment.

JsFiddle Playground

Note: possible values that can be passed to the align() method are: Left, Right, Top, Bottom and Center. Also, possible values depend on the **.position() parameter. With Top and Bottom legend position it is possible to use Left, Right and Center parameters of align(). For Left and Right values of position() it's possible to use Top, Bottom and Center parameters of align() method.

Visualization

As far as a legend is a part of a chart, its appearance should be tuned properly. Main aspects of legend visual appearance are described in this section.

Background

Legend background allows you to configure the border and the inner color of the legend. Method background() controls background visual appearance. To learn more about background setting please study the background tutorial.

JsFiddle Playground

Size

Legend size is controlled by height() and width() parameters.

Sample Pie Chart with a legend of a fixed (75px - width, 140px height) size positioned to the "Left" of the chart, aligned to "Top", with padding of 10 pixels:

var legend = chart.legend();
// set legend height to 140px
legend.height(140);
// set legend width to 95px
legend.width(95);

Here is a sample with adjusted legend size

JsFiddle Playground

Note: the space between data plot and legend is controlled using **padding() method.

Paging

If legend items can't be displayed on a plot of a legend, paginator() method controls legend page. Paginator can be placed anywhere inside the legend.

// legend settings
var paginator = chart.legend().paginator();
// set paginator layout
paginator.layout("vertical");
// place paginator on the right
paginator.orientation("right");

JsFiddle Playground

Marker Symbol

When you are working with line and spline chart you may use markers to distinguish different series. By default AnyChart charting library shows marker symbols in legend - only color representation is used in a small line icon. If you want to tune markers in legend icons you have to adjust **legendItem() method. Sample code presented below.

// chart data
var series = chart.line([
  {x: "John", value: 16000},
  {x: "Jake", value: 21000},
  {x: "Peter", value: 22000}
]);
// settings for legend item of the series
var item = series.legendItem()
// set inner color of icon marker
item.iconMarkerFill("gold");
// set border of icon marker
item.iconMarkerStroke("red");
// set type of icon marker
item.iconMarkerType("star6");

Here is a sample with different settings for a marker of legend item.

JsFiddle Playground

Tooltip

If you want to configure legend tooltips - you should do that using tooltip() methods. You can tune its visual appearance and format. In the following sample we will format tooltips of the legend to show detailed description information.

JsFiddle Playground

Series Management

You can easily control series of the chart using chart legend. You can hide and show any of the series by clicking on the legend items. Here is a sample of column chart with four series. One of the series is already disabled. Click on the last legend item to show hidden series.

JsFiddle Playground

Custom Item

When creating legend you can add your own items with any information you want to see on the legend, to do that use **itemsFormatter() method.

var legend = chart.legend();
// adjust legend items
legend.itemsFormatter(function(items){
  // push into items array
  items.push({
// set text of a new item
text: "item text "
  });
  // return items array
  return items;
});

In the sample chart below we've used custom item that adds Total data to legend.

JsFiddle Playground

Custom Legend

AnyChart JavaScript Framework sets no limits to the amount of legends on one chart plot. Legend can be a part chart as well as a separate unit. Sample below demonstrates three custom legend at the bottom of the chart.

JsFiddle Playground

One Legend for Several Charts

As you can see, one legend can contain different information from one chart. Moreover, one legend can contain information from several charts. To add several chart into one legend use itemsSource() method and define charts for legend's content.

// define charts
var chart2005 = anychart.column();
var chart2006 = anychart.column();

// create custom legend
var legend = anychart.ui.legend();
// set sources for legend items
legend.itemsSource([chart2005, chart2006]);

JsFiddle Playground

One Legend for Several Series

You can attache an event to a legend items. Use listen() method to set an event for a legend. List of possible event can be found in anychart.enums.EventType. For additional information on events in AnyChart you can find in Event Listeners tutorial

// create legend
var legend = anychart.ui.legend();

// enable and disable series on legend item click
legend.listen("legendItemClick", function(event) {
  // get item's index
  var index = event["itemIndex"];
  // manage enabled/disabled state of the series
  chart2005.getSeries(index).enabled(! chart2005.getSeries(index).enabled());
  chart2006.getSeries(index).enabled(! chart2006.getSeries(index).enabled());
});

Sample below demonstrate managing several series with one legend item.

JsFiddle Playground