Creating Charts with Multiple Axes

1 Answer 73 Views
Chart
Yoshirou
Top achievements
Rank 1
Yoshirou asked on 11 Mar 2024, 09:48 AM

Hi,

I used this documentation:
https://docs.telerik.com/devtools/maui/knowledge-base/chart-multiple-axes

However, no good results were obtained.

①The second axis appears to be misaligned.
②If possible, I would like to place the second axis to the left of the first axis.

Is there a solution to these?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 11 Mar 2024, 05:27 PM

Hello Yoshirou,

You can define the chart axis next to each other by using the native chart control. This customization required subscribing to the handler changed and add additional logic to access the native chart and series. So in this case you have one chart definition and two series: 

<Grid>
    <telerik:RadCartesianChart x:Name="chart" HandlerChanged="chart_HandlerChanged">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis ShowLabels="True" />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:NumericalAxis Location="Left" Minimum="-10" Maximum="110" MajorStep="10"
                                ShowLabels="True"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:LineSeries CategoryBinding="Category"
                            ValueBinding="Value"
                            ShowLabels="True"
                            ItemsSource="{Binding Data1}" />

            <telerik:LineSeries CategoryBinding="Category"
                ValueBinding="Value"
                ShowLabels="True"
                ItemsSource="{Binding Data2}" />
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

 

I have attached the xaml and cs files used for this approach and an image on WinUI. In general if you want to further customize the chart you need to use the native chart controls. The chart is a native control, so we have iOS/Android and WinUI charts and they follow the platform guidelines. So there isn't a 100% matching across the platform. 

I hope the provided approach will be of help for the scenario you are looking for. If you have any additional questions, I will be glad to assist further. 

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Chart
Asked by
Yoshirou
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or