Chart Categorical Axis

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 more about the categorical axis and how to use it in your chart.

Getting Started
Properties
References

Getting Started

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 the CategoricalSeries's items. The axis is divided into discrete slots and each data point is visualized in the slot corresponding to its categorical value.

Example 1: Categorical Axis

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Country } from '../../data-services/country';
import { ObservableArray } from "tns-core-modules/data/observable-array";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-bar',
    providers: [DataService],
    templateUrl: 'chart-series-bar.component.html'
})
export class ChartSeriesBarComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

    get categoricalSource(): ObservableArray<Country> {
        return this._categoricalSource;
    }

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
    }
}

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>
</RadCartesianChart>

Properties

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.

Figure 1: This is how the axis in this example looks like on Android (left) and iOS (right)

Cartesian chart: Pie series

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:

Bar Series Example

NativeScript Angular