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
 Copy Code
|
|---|
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
Copy Code
|
|---|
pieChart.series.title = "Monthly Sales"; |
The appearance settings for the legend are in the theme property:
| JavaScript
Copy Code
|
|---|
pieChart.theme.legendBackground = new Drawing.Brush("#f0f0f0"); |
and many more. The title of the legend is set with:
| JavaScript
Copy Code
|
|---|
pieChart.legendTitle = "Year 2016"; |
If you don't want a legend title just set:
| JavaScript
Copy Code
|
|---|
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
Copy Code
|
|---|
var legend = new Charting.LegendRenderer(); |
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
Copy Code
|
|---|
dashboard.rootPanel.children.add(legend1); |
The LegendRenderer class exposes numerous properties for styling your legend, its labels, title, border etc. Check them here.