Chart Legend

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. RadCartesianChart and RadPieChart both can display a legend. In RadCartesianChart the legend annotates each of the series, while in RadPieChart the legend annotates the data points 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.

Define a Legend
Legend Selection
References

Define a Legend

To define a legend in your chart you need to use the RadLegendViewDirective:

Example 1: A Cartesian Chart with a Legend:

import { getCountriesData } from '../data';

const description = 'Legend';

export default {
  name: 'Legend',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart seriesSelectionMode="Single">
      <CategoricalAxis v-tkCartesianHorizontalAxis></CategoricalAxis>
      <LinearAxis v-tkCartesianVerticalAxis maximum="50"></LinearAxis>

      <BarSeries v-tkCartesianSeries seriesName="Bar" legendTitle="Bar series"
        :items="items" categoryProperty="Country" valueProperty="ThirdVal">
      </BarSeries>
      <LineSeries v-tkCartesianSeries seriesName="Line" legendTitle="Line series"
        :items="items" categoryProperty="Country" valueProperty="Amount">
      </LineSeries>
      <AreaSeries v-tkCartesianSeries seriesName="Area" legendTitle="Area series"
        :items="items" categoryProperty="Country" valueProperty="SecondVal">
      </AreaSeries>

      <Palette v-tkCartesianPalette seriesName="Bar">
        <PaletteEntry v-tkCartesianPaletteEntry fillColor="#ff6699" strokeColor="#ff6699"></PaletteEntry>
      </Palette>
      <Palette v-tkCartesianPalette seriesName="Line">
        <PaletteEntry v-tkCartesianPaletteEntry fillColor="#4d88ff" strokeColor="#4d88ff"></PaletteEntry>
      </Palette>
      <Palette v-tkCartesianPalette seriesName="Area">
        <PaletteEntry v-tkCartesianPaletteEntry fillColor="#8033cc33" strokeColor="#33cc33"></PaletteEntry>
      </Palette>

      <RadLegendView v-tkCartesianLegend position="Top" title="Series type" height="150" enableSelection="true"></RadLegendView>

    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getCountriesData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

Figure 1: Legend shown in action on Android (left) and iOS (right)

Chart Legend: Android Chart Legend: iOS

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 the ChartLegendPosition enum
horizontalOffset - used to define a horizontal offset for the legend. This offset is calculated considering the currently set offsetOrigin
verticalOffset - used to define a vertical offset for the legend. This offset is calculated considering the currently set offsetOrigin
offsetOrigin - used to define the point relative to which the offsets are calculated. Possible values for this property are defined by the ChartLegendOffsetOrigin 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

Legend Selection

RadLegendView exposes the enableSelection property which can be used to turn off/on the automatic selection of Chart Series or Chart Data points when tapping on legend items.

References

Want to see this scenario in action? Check our SDK Examples repository on GitHub. You will find this and many other practical examples with NativeScript UI.

Examples used in this article:

Legend Example

NativeScript & Vue.JS