Chart Selection

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn how to enable selection of series or selection of single data points.

Getting Started
Selection Events
References

Getting Started

You can make your charts more interactive by enabling selection. When selection is enabled you can select, deselect and handle the selection events of either the data points or the series in RadCartesianChart and RadPieChart.

The selection can be set on the whole chart with the seriesSelectionMode and pointSelectionMode properties. The values for these properties can be:

None - Selection is disabled.
Single - Only one series/point can be selected at a time.
Multiple - More one series/point can be selected simultaneously.

For finer tuning of the selection behavior you can also set the selectionMode property of each series. The individual series selection mode enables you to specify multiple data point selection for one series, single data point selection for another series and even disable selection for a third series all the same time. With the combination of the chart selection properties and series selectionMode property, any selection scenario can be implemented. The series selectionMode property can have the following values:

None - Selection is disabled.
NotSet - The selection mode will be determined by chart's properties.
DataPoint - Only one point can be selected at a time.
DataPointMultiple - More than one point can be selected at a time.
Series - All data points are selected simultaneously.

Example 1: Enabling Data Point Selection

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

const description = 'Pie Series';

export default {
  name: 'PieSeriesExample',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <GridLayout rows="*, *">
      <RadPieChart allowAnimation="true" row="0">
        <PieSeries v-tkPieSeries
          selectionMode="DataPoint"
          expandRadius="0.4"
          outerRadiusFactor="0.7"
          valueProperty="Amount"
          legendLabel="Brand"
          :items="items" />

        <RadLegendView v-tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
      </RadPieChart>

      <RadPieChart allowAnimation="true" row="1">
        <DonutSeries v-tkPieSeries
          selectionMode="DataPoint"
          expandRadius="0.4"
          outerRadiusFactor="0.7"
          innerRadiusFactor="0.4"
          valueProperty="Amount"
          legendLabel="Brand"
          :items="items" />

        <RadLegendView v-tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
      </RadPieChart>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getPieData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

Example 2: Enabling Series Selection

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

const description = 'Series Selection';

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

      <BarSeries v-tkCartesianSeries selectionMode="Series"
        :items="bubbleItems" categoryProperty="Country" valueProperty="Impact">
      </BarSeries>

      <LineSeries v-tkCartesianSeries selectionMode="Series" showLabels="true"
        :items="items" categoryProperty="Country" valueProperty="Amount">
      </LineSeries>
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getCountriesData(),
      bubbleItems: getBubbleCategoricalData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

Selection Events

To notify you when the selection state of an item is changed, the chart exposes the following events:

seriesSelected - Fired after a series is selected. The event data argument provides information about the event name, the chart that the series belongs to and the ChartSeries class instance for the selected series
seriesDeselected - Fired after a series is deselected. The event data argument provides information about the event name, the chart that the series belongs to and the ChartSeries class instance for the selected series
pointSelected - Fired after a data point is selected. The event data argument provides information about the event name, the chart that the data point belongs to, the point index and the native data point class instances(TKChartData for iOS, DataPoint for Android)
pointDeselected - Fired after a data point is deselected. The event data argument provides information about the event name, the chart that the data point belongs to, the point index and the native data point class instances(TKChartData for iOS, DataPoint for Android)

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:

NativeScript & Vue.JS