🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript & Vue.JS

RadChart 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 use the RadLegendViewDirective:

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

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

Here's a full example of a chart with a legend set on it:

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() {
      frameModule.topmost().goBack();
    },
  },
};

The following images demonstrate how this setup looks like in a running application:

Chart Legend: Android Chart Legend: iOS