.NET MAUI Cartesian Chart Categorical Axis

Updated on Aug 12, 2026

The CategoricalAxis arranges the data points in categories. The axis is divided into discrete slots and each data point is visualized in the slot that corresponds to its categorical value. Use a CategoricalAxis when one of the chart dimensions represents categories rather than numeric or date-time values—for example, when plotting a BarSeries against a NumericalAxis.

You define the axis through the HorizontalAxis, the VerticalAxis, or the Axes collection of the RadCartesianChart.

Axis Location

Use the Location (enum of type Telerik.Maui.Controls.Charts.ChartAxisLocation) property to specify the axis location. The available options are Left, Right, Top, or Bottom.

Use the GapLength (double) property to specify the distance between the axis and the chart area. The value is in the [0, 1] range, defaults to 0.3.

Line Styling

Use the following properties to customize the appearance of the axis line:

• LineColor (Color)—Defines the color of the axis line.
• LineThickness (double)—Defines the thickness of the axis line.

Labels Customization

The Categorical Axis exposes the following properties for configuring its position, labels, and appearance:

• ShowLabels (bool)—Defines whether the axis labels will be displayed.
• LabelStyle (Style with target type ChartLabelAppearance)—Defines the style of the axis labels.
• LabelInterval (int)—Defines the step at which the axis renders labels.
• CategoryLabelFormat (string)—Defines the format of the axis labels.

Example

The following example shows how to configure a CategoricalAxis as the horizontal axis of the chart.

1. Define the CategoricalAxis and Chart in XAML:

XAML

<charts:RadCartesianChart>
    <charts:RadCartesianChart.BindingContext>
        <models:DateTimeViewModel />
    </charts:RadCartesianChart.BindingContext>
    <charts:RadCartesianChart.Resources>
        <Style x:Key="axisLabelStyle" TargetType="charts:ChartLabelAppearance">
            <Setter Property="TextColor" Value="#3F51B5" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>
    </charts:RadCartesianChart.Resources>
    <charts:RadCartesianChart.Axes>
        <charts:DateTimeAxis MajorStep="1"
                             MajorStepUnit="Month"
                             MajorTickColor="#865FC5"
                             MajorTickThickness="3"
                             MajorTickLength="8"
                             LabelFormat="MMM/yyyy"
                             LineColor="#FF453A"
                             LineThickness="2"
                             LabelStyle="{StaticResource axisLabelStyle}" />
        <charts:NumericalAxis Location="Left"
                              MajorTickLength="8"
                              MajorTickThickness="3"
                              LineColor="#0B84FF"
                              LineThickness="2"
                              LabelStyle="{StaticResource axisLabelStyle}" />
    </charts:RadCartesianChart.Axes>
    <charts:RadCartesianChart.Series>
        <charts:LineSeries HorizontalBinding="Date"
                           VerticalBinding="Value"
                           ItemsSource="{Binding Data}" />
    </charts:RadCartesianChart.Series>
</charts:RadCartesianChart>

2. Add the charts namespace:

XAML

xmlns:charts="clr-namespace:Telerik.Maui.Controls.Charts;assembly=Telerik.Maui.Controls"

3. Add the data model:

C#

public class CategoricalData
{
    public string Category { get; set; }

    public double Value { get; set; }
}

4. Add the ViewModel:

C#

public class CategoricalViewModel
{
    public ObservableCollection<CategoricalData> Data { get; } = new ObservableCollection<CategoricalData>
    {
        new CategoricalData { Category = "Jan", Value = 42 },
        new CategoricalData { Category = "Feb", Value = 58 },
        new CategoricalData { Category = "Mar", Value = 37 },
        new CategoricalData { Category = "Apr", Value = 71 },
        new CategoricalData { Category = "May", Value = 64 },
        new CategoricalData { Category = "Jun", Value = 88 },
    };
}

This is the result:

For runnable examples with the Cartesian Chart axes, go to the SDKBrowser Demo Application and navigate to the Chart > Axes category.

See Also

• Numerical Axis
• Grid Lines