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

NativeScript & Vue.JS

RadChart Trackball

A Trackball is used to display information of a given point within the Chart. For example, in a Financial chart the Trackball can display the Open, High, Low and Close value of a stock for a single day. Normally, a Trackball is displayed when the user holds a finger on the plot area of the chart and drags it through the set of datapoints a given series represents. RadCartesianChart supports displaying a trackball via its trackball property.

Getting Started with Trackball

To define a trackball on your RadCartesianChart you need to use the TKCartesianTrackballDirective directive in your chart as shown below:

Example 1: Using the Trackball directive

  <Trackball v-tkCartesianTrackball></Trackball>

Example 2: A Cartesian Chart with a Trackball defined on it:

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

const description = 'Trackball';

export default {
  name: 'TrackballExample',
  description: description,
  template: `
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    <GridLayout rows="auto, *">
      <Label text="Tap and hold on a given datapoint to display the Trackball. Drag across datapoints to update the Trackball position." textWrap="true"></Label>
      <RadCartesianChart row="1">
        <DateTimeCategoricalAxis v-tkCartesianHorizontalAxis dateFormat="yyyy-MM-dd" verticalLocation="Bottom"></DateTimeCategoricalAxis>
        <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>
        <Trackball v-tkCartesianTrackball></Trackball>
        <CandlestickSeries v-tkCartesianSeries
          categoryProperty="Date" :items="items"
          openPropertyName="Open" highPropertyName="High" lowPropertyName="Low" closePropertyName="Close">
  data () {
    return {
      title: description,
      items: getCandleStickData(),
  methods: {
    onNavigationButtonTap() {

Depending on your current setup, the trackball will display information about the datapoints within the chart in a different manner. For example, in a RangeBarSeries the trackball will display the range values alongside with the current category value. In a OhlcSeries or CandlestickSeries the trackball will display the Open, High, Low and Close values alongside with the current category value. Here's an example:

Figure 1: Trackball shown in action on iOS and Android




By using the snapMode property you can control how the trackball is positioned relative to the series and the datapoints within. Possible values are defined by the ChartTrackballSnapMode enum.

Intersection Points

By using the showIntersectionPoints property you can determine whether information about all of the relevant datapoints will be shown in the trackball. This behavior is dependent on the snapMode property setting.

Custom Content

You can customize the content within the trackball by using the trackBallContentRequestedEvent event. This event is fired each time information about a given datapoint is needed for the trackball. The event exposes an instance of the TrackballCustomContentData. This class extends the ChartEventData class and adds two new properties:

  • seriesIndex - the index of the active series with which the user has started interacting
  • content - used to override the default datapoint content. By setting this property you can customize the content within the trackball for the provided data point. You can use the base event data properties to obtain the datapoint index and the business object for which the datapoint has been generated for