Still have questions?
Contact support
You are looking at an outdated 7.10.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 API. 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