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.

<chart:RadCartesianChart.series>
    <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

        <chart:BarSeries.horizontalAxis>
            <chart:CategoricalAxis/>
        </chart:BarSeries.horizontalAxis>
        <chart:BarSeries.verticalAxis>
            <chart:LinearAxis/>
        </chart:BarSeries.verticalAxis>
    </chart:BarSeries>
</chart:RadCartesianChart.series>

Features

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 majorTicksInterval 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

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: