NativeScript Angular

Chart DateTimeCategoricalAxis

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 date time categorical axis and how to use it in your chart.

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 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 DateTimeCategoricalAxis is a special axis that works with the CategoricalSeries and expects each CategoricalDataPoint to provide a valid date time value as its Category. Once built, the groups are sorted in chronological order.


The DateTimeCategoricalAxis extends CategoricalAxis so you can use the same features. Additionally, you can set the date time format and component.

Date Time Component

Defines the component of each Calendar structure that participates in the grouping process. The possible values are from the ChartAxisDateTimeComponent enumeration. To get or set the component use the dateTimeComponent property.

Date Time Format

Defines the format of the Calendar structure that will be used for the categories. To get or set the format value use the dateTimeFormat property.


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.

Related articles you might find useful: