# Chart Legend

Learn about chart legend configuration in ActiveReportsJS.

## Content

A `legend` is a box that appears along with the [plot](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot) and displays the information that helps a chart reader better understand the visual representation of the data. Several legend types could appear in the chart hierarchy in the [Report explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer).

### Global legend
You can use this legend type when a plot has several `Data Values` to display their names, as in [Multiple Values Line Plot](/activereportsjs/demos/Reports/MultipleValuesLinePlot/purejs) example. To show the global legend, turn on the `Show Values Names In Legend` flag in the plot's properties.

### Color Legend
This legend displays the match between the fill or stroke color of plot subsections and the corresponding subcategories of a data value. You should configure the `Color Encoding` of a plot to display the Color Legend. Almost all the plot types support this legend. For instance, you can check the [Stacked Column demo](/activereportsjs/demos/Reports/StackedColumnPlot/purejs).

### Shape Legend
The [Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart#shape-encoding) plot supports this type of legend to show the match between the shape of data points symbols and the corresponding subcategories of a data value. You should configure the `Shape Encoding` of a line plot to display the Shape Legend. Note that Shape Legend and Color legend are merged if you use them together.

### Size Legend
The [Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart#size-encoding) and [Bubble](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/scatter-bubble) plots support this type of legend to display the match between the size of data points symbols and the corresponding range of data values. You should configure the `Size Encoding` of a [Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart#size-encoding) or [Bubble](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/scatter-bubble#size-encoding) plot to display the Size Legend. The Color and Size legends can co-exist within the same plot.
The `Ranges` property of the `Size Legend` allows configuring custom ranges of data values. Each range includes the `TITLE` and the `TO`(that is the upper value of the range) properties.

Regardless of the legend type, you can configure its appearance using the following properties.

### Title
The string [Expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) determines the heading of the legend. A subset of [text properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) in the `Legend Title` section allows you to set up the title appearance.

### Border and Background
The [line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties) properties in the `Border` section and the `Background` color [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) determine the border and fill color of the bounding box of a legend.

### Layout and Visibility
The `Orientation` [enum](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#enum) value determines the direction of legend items appearance:

* `Horizontal` \- from left to right
* `Vertical` \- from top to bottom

The `Position` value sets the legend's location relative to the [plot area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area).
You could also set the `Padding` between the legend bounding box and its content. It automatically increases the size of the legend.
The `Visibility` flag shows and hides the legend.

### Text
A subset of [text properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) in the `Legend Text` section allows you to configure the appearance of textual information displayed in the legend.
### Action
This group of properties that available for the `Color`, `Shape`, and `Size` encodings determine the [Interactive Action](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity) when a report reader clicks a legend item. You can use bound field references to pass parameters in a drill-through report or configure a dynamic bookmark or URL. The field value is evaluated in the scope of the current color, shape, or size encoding value. Visit the [Drill-Through Reports Walkthrough](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/get-started-with-analytical-reports/Get-Started-With-DrillThrough-Reports) for more information. It explains how to set up the drill-through column plot, but the same technique applies to an encoding.