.NET MAUI Cartesian Chart Numerical Axis

Updated on Aug 12, 2026

The NumericalAxis positions the data points depending on their numerical value. It builds a numerical range—either user-defined or automatically calculated—and determines the coordinate of each data point along the axis.

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.

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.

Range and Ticks

Use the following properties to control the range and the ticks of the axis:

• Minimum (double)—Gets or sets the minimum value of the axis. By default, the axis calculates the minimum from the smallest value of the plotted data points.
• Maximum (double)—Gets or sets the maximum value of the axis. By default, the axis calculates the maximum from the largest value of the plotted data points.
• DesiredTickCount (int)—Gets or sets the number of ticks that the axis renders.
• MajorTickColor (Color)—Defines the color of the major ticks.
• MajorTickThickness (double)—Defines the thickness of the major ticks.
• MajorTickLength (double)—Defines the length of the major ticks.

Labels Customization

The Numerical Axis exposes the following properties for configuring the labels and their appearance:

• ShowLabels (bool)—Defines whether the axis labels will be displayed.
• LabelStyle (Style)—Defines the style, targeting ChartLabelAppearance, that applies to the axis labels.
• LabelInterval (int)—Defines the step at which the axis renders labels.

Example

The following example shows how to define a NumericalAxis with an explicit range and tick count.

1. Define the NumericalAxis and the chart definition in XAML:

XAML

<charts:RadCartesianChart>
    <charts:RadCartesianChart.BindingContext>
        <models:CategoricalViewModel />
    </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:CategoricalAxis LabelInterval="1"
                                LabelStyle="{StaticResource axisLabelStyle}"
                                ShowLabels="True"
                                LineColor="#FF453A"
                                LineThickness="2"  />
        <charts:NumericalAxis Minimum="0"
                              Maximum="100"
                              DesiredTickCount="6"
                              LineColor="#0B84FF"
                              LineThickness="2"
                              ShowLabels="True"
                              LabelStyle="{StaticResource axisLabelStyle}" />
    </charts:RadCartesianChart.Axes>
    <charts:RadCartesianChart.Series>
        <charts:BarSeries HorizontalBinding="Category"
                          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 },
    };
}

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

See Also

• Categorical Axis
• Grid Lines