Chart: Legend
RadCartesianChart
and RadPieChart
both can display a legend annotating each of the series or datapoints within the chart. In this article you will learn how to show a legend in your chart and how to customize its behavior and appearance.
Defining a Legend
To define a legend in your chart you need to set the legend
property as shown below:
<chart:RadCartesianChart.legend>
<chart:RadLegendView position="Top" title="Series type" height="150" enableSelection="true"/>
</chart:RadCartesianChart.legend>
The legend
property expects an instance of the RadLegendView
class which exposes several properties that can be used to customize the size, position and offset of the legend:
-
position
- used to define the position of the legend. Possible values for this property are defined by theChartLegendPosition
enum -
horizontalOffset
- used to define a horizontal offset for the legend. This offset is calculated considering the currently setoffsetOrigin
-
verticalOffset
- used to define a vertical offset for the legend. This offset is calculated considering the currently setoffsetOrigin
-
offsetOrigin
- used to define the point relative to which the offsets are calculated. Possible values for this property are defined by theChartLegendOffsetOrigin
enum -
title
- used to define a title for the legend -
titleColor
- used to define the text color of the legend title -
titleSize
- used to define the text size of the legend title -
enableSelection
- determines whether Series or DataPoints in the Chart are automatically selected upon tapping on an item in the Legend
Here's a full example of a chart with a legend set on it:
<chart:RadCartesianChart id="cartesianChart" seriesSelectionMode="Single">
<chart:RadCartesianChart.series>
<chart:BarSeries legendTitle="Bar series" items="{{ categoricalSource }}" stackMode="Stack" categoryProperty="Country" valueProperty="ThirdVal"/>
<chart:LineSeries legendTitle="Line series" items="{{ categoricalSource }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"/>
<chart:AreaSeries legendTitle="Area series" items="{{ categoricalSource }}" stackMode="Stack" categoryProperty="Country" valueProperty="SecondVal"/>
</chart:RadCartesianChart.series>
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis/>
</chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis maximum="50"/>
</chart:RadCartesianChart.verticalAxis>
<chart:RadCartesianChart.legend>
<chart:RadLegendView position="Top" title="Series type" height="150" enableSelection="true"/>
</chart:RadCartesianChart.legend>
</chart:RadCartesianChart>
The following images demonstrate how this setup looks like in a running application:
Legend Selection
RadLegendView
exposes the enableSelection
property which can be used to turn off/on the automatic selection of Chart Series or Chart Datapoints when tapping on legend items.
References
Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.