Add and Style Legends

I. Add a Legend to a Simple Chart Type

On a basic chart type - PieChart, LineChart etc. setting the showLegend  property to true is enough to render the legend with default appearance 
settings. In these cases the legend is always only one and can have as many items as the count of chart series.

JavaScript

pieChart.showLegend = true;

The legend labels are taken from the title property of the series that are added to the chart. The brush is the brush for this series. If there are multiple brushes used, the first one is considered.

JavaScript

pieChart.series.title = "Monthly Sales";

The appearance settings for the legend are in the theme property:

JavaScript

pieChart.theme.legendBackground = new Drawing.Brush("#f0f0f0");
pieChart.theme.legendTitleFontName = "Arial";
pieChart.theme.legendTitleFontSize = 14;

and many more. The title of the legend is set with:

JavaScript

pieChart.legendTitle = "Year 2016";

If you don't want a legend title just set:

JavaScript

pieChart.showLegendTitle = "false";

By default the legend shows as many labels are there are series in the chart. The color box before each chart label is painted with the first brush assigned to this series. Legend drag is enabled by default so you can position it wherever you want. If you want to render your legend at a given location from the very start use the properties of the chart class: legendHorizontalAlignment, legendVerticalAlignment, legendSpacing, and legendMargin.

II. Using a LegendRenderer

The LegendRenderer is the class that you should use when you want to add a legend in a more advanced chart scenario.

JavaScript

var legend = new Charting.LegendRenderer();
legend.content = new Collections.ObservableCollection 
  ([lineRenderer]);
legend.background = new Drawing.Brush 
(Drawing.Color.knownColors.lightyellow);
legend.horizontalAlignment = Components.LayoutAlignment.Far;
dashboard.rootPanel.children.add(legend);

A LegendRenderer has properties for legend positioning and styling. The content property ties the LegendRenderer to a collection of 
SeriesRender objects, each of which provides a series title to display as a legend item. You can add as many LegendRenderer objects as you 
wish and arrange them according to your needs. As a rule you just need to add your LegendRenderer to the children of your panel as you do with 
any other chart element.

If you are building a dashboard, add the LegendRenderer directly to the root panel:

JavaScript

dashboard.rootPanel.children.add(legend1);

The LegendRenderer class exposes numerous properties for styling your  legend, its labels, title, border etc. Check them here.