Creating Charts with Multiple Axes
Environment
Product | Progress® Telerik® UI for .NET MAUI Chart |
Product Version | 4.0.0 |
Description
How can I create a chart with multiple axes when I want to add a second horizontal or vertical axis?
Solution
To solve this issue, create two separate Charts together and add a transparent background to the top chart.
By using the Axis
Location
property, you can specify the axis position. The supported options are Rightand
Leftfor vertical axes, and
Topand
Bottom` for horizontal axes.
The following example shows the XAML code for implementing the suggested approach:
<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>