New to Telerik UI for .NET MAUI? Start a free 30-day trial

Chart with multiple axis

Environment

Product Version 4.0.0
Product Chart for .NET MAUI

Description

This article explains how to create chart with muliple axis. If you want to add second horizontal and or vertical axis.

Solution

Add 2 separate Charts together and have a transparent background on the top chart.

Using the Axis Location property you can specify the axis position. The options are —Right, Left for vertical axis and Top, Bottom for horizontal axis.

This is the XAML code:

<Grid>
    <!-- bottom chart -->
    <telerik:RadCartesianChart x:Name="chart" >
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis ShowLabels="True" />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:NumericalAxis Location="Right"
                                   ShowLabels="True"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:LineSeries CategoryBinding="Category"
                                ValueBinding="Value" 
                                ShowLabels="True"
                                ItemsSource="{Binding Data}" />
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    <!-- top chart -->
    <telerik:RadCartesianChart x:Name="chart2"
                               BackgroundColor="Transparent">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis LabelTextColor="Transparent" 
                                     LineColor="Transparent" 
                                     ShowLabels="False"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:NumericalAxis ShowLabels="True"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:LineSeries CategoryBinding="Category"
                                ValueBinding="Value" 
                                ShowLabels="True"
                                ItemsSource="{Binding Data1}" />
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>
In this article
Not finding the help you need?