Chart Axes: CategoricalAxis

When RadCartesianChart visualizes CategoricalSeries, it needs an axis that can represent the different categories. The CategoricalAxis is used to displays a range of categories. Categories are built depending on the Category value of each CategoricalDataPoint present in the owning CategoricalSeries chart series. The axis is divided into discrete slots and each data point is visualized in the slot corresponding to its categorical value.

The next example demonstrates how to use CategoricalSeries with BarSeries.

We first create a basic JS or TS module that contains a collection of objects, which will be used by the chart to provide intuitive data visualization.

import { ObservableArray } from 'tns-core-modules/data/observable-array';

export const getCountriesData = () => {
  return new ObservableArray([
    { Country: 'Germany', Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
    { Country: 'France', Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
    { Country: 'Bulgaria', Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
    { Country: 'Spain', Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
    { Country: 'USA', Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }

All that is left is to declare the template of the vue component in which we:

import * as frameModule from 'tns-core-modules/ui/frame';
import { getCountriesData } from '../data';

export default {
  template: `
      <BarSeries v-tkCartesianSeries
                 :items="items" />
      <CategoricalAxis v-tkCartesianHorizontalAxis />
      <LinearAxis v-tkCartesianVerticalAxis />
  data () {
    return {
      items: getCountriesData(),


Plot Mode

The CategoricalAxis allows you to define how exactly the axis will be plotted on the viewport of the chart. The possible values are:

  • BetweenTicks: Points are plotted in the middle of the range, defined between each two ticks.
  • OnTicks: Points are plotted over each tick.

You can get and set the current value with the plotMode property.

Major Tick Interval

Defines the step at which major ticks are generated. This property also affects axis labels as they are generated on a per major tick basis. You can get or set the value with the majorTickInterval property. For example, if you don't want to display all ticks, but instead only half of them (display the first, third, fifth, etc. ticks), you should set the major tick interval to 2.

This is how the axis in this example looks like:
Cartesian chart: Pie series Cartesian chart: Pie series