- Default Legend
The legend is defined as an instance of the anychart.core.ui.Legend class – its methods allow adjusting most legend settings. This article includes those settings that affect the legend as a whole: its layout, size, position, and so on.
Enabling / Disabling
// create a chart var chart = anychart.line(); // enable the legend chart.legend(true);
// create a chart var chart = anychart.line(); // enable the legend chart.legend().enabled(true);
This sample shows how to enable the legend of a multiple-series line chart by using the legend() method:
As a rule, when you click on a legend item of a multiple-series chart, the series of the chart it represents is shown / hidden, and when you hover over an item, the hover state of the series is enabled. As for single-series chart types, their legend items represent points, and the behavior of the legend varies with the type.
Note: To learn how to change the default interactivity settings of the legend, see the Events section.
In the sample below, the last series of a multiple-series chart is initially disabled, but its icon is shown in the legend, and you can make the series appear by clicking on the icon:
// create a chart var chart = anychart.line(); // create series and set the data var series1 = chart.line(seriesData1); var series2 = chart.line(seriesData2); var series3 = chart.line(seriesData3); var series4 = chart.line(seriesData4); // hide the last series series4.enabled(false);
By default, legend items of a multiple-series chart represent one of the series of the chart.
// set source mode of the legend chart.legend().itemsSourceMode("categories");
Setting the source to
"categories" may be reasonable if there is only one series:
Also, you can create custom legend items and bind them to chart elements of your choice – for example, to chart points. To access such advanced options as as linking the legend to several charts at once or showing multiple legends on one chart, use the standalone legend.
// set the layout of the legend chart.legend().itemsLayout("vertical");
The following sample shows the difference between the
Sometimes there are too many legend items, and the space they would take up if they were shown simultaneously exceeds the size of the legend. The layout affects the behavior of the legend in this situation:
If the layout is set to
"vertical", only a part of the items is shown at once, and the legend paginator is automatically enabled, allowing you to flip through them.
When the layout is
"vertical-expandable", the legend expands, and the chart takes up a smaller space.
Note 1: The paginator can be configured: read the Paginator article to learn more.
Note 2: You can set a limit to the expansion of the legend – see the Size: Expandable section.
To set a fixed legend size, use the following methods:
You can set a flexible legend size. Use the
"vertical-expandable" layout to allow the legend to expand. Then call the maxHeight() and maxWidth() methods, which limit the extent to which it expands. Please note that the maximum height and width are set either in pixels or as a percentage.
In the following sample, the maximum height and width are applied to a horizontally oriented expandable legend. You can add a few items to the chart to see when the legend stops expanding:
// set the maximum height and width of the legend chart.legend().maxHeight("30%"); chart.legend().maxWidth("50%");
Position + Alignment
// set the position of the legend chart.legend().position("right"); // set the alignment of the legend chart.legend().align("top");
The sample below shows how these methods affect a legend with a vertical layout:
Outside / Inside
The positionMode() method allows you to set the position mode of the legend: you can place it outside or inside the data area. This method accepts the parameters listed in anychart.enums.LegendPositionMode:
// set the position mode of the legend chart.legend().positionMode("inside");
Drag and Drop
The drag() method with
true as a parameter enables the drag-and-drop mode, allowing users to drag the legend to any position:
// enable the drag-and-drop mode of the legend chart.legend().drag(true);
Note 1: The drag-and-drop mode works within the limits set by the position mode, which places the legend outside or inside the area limited by the axes. If the position mode is the default
outside, an additional limit is set by the position of the legend relative to the chart.
Note 2: When the drag-and-drop mode is enabled, you can use special events of the legend. See the Events: Legend section.