Creating Charts with Multiple Axes

[Yoshirou]

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?

[Didi]

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

[Zaynalobiddin]

Hi Didi,

Thanks for the provided approach and sample, however, in real life this case is useless as it requires your data be ready on once handlerchanged event is raised. We have a case where data is loaded asynchronously and empty data does not help to add secondary vertical axis. Calling this method repeatedly once data load complete would only update bars/lines and left vertical axis with no adding secondary vertical axis. 

I hope and assume there is a solution for async data load as well. I would appreciate to find out the solution.

Thanks and Regards,

Zaynalobiddin Rakhmonov

[Didi]

Hi, 

The behavior seems related to the following issue we have on iOS and MacCatalyst -> https://feedback.telerik.com/maui/1631623-chart-ios-maccatalyst-any-customizations-made-in-the-handler-are-reset-when-chart-series-are-updated I have sent more details to the support ticket.