How to align the y-axes of multiple charts?

[Ben]

I have three charts that are being constantly updated with live data, charts A, B, and C. Chart A's data is always from -180 to +180. Charts B and C can range from 0-10000 or more. The x-axis is always a synchronized timestamp.

The problem: When the data in charts B and C exceeds 100, 1000, or 10000, the y-axes automatically update their ticks, and then the y-axes are no longer aligned. However, it's not useful for me to hard-code the y-range of [0,10000] because nominally the data is between [0,500], or in certain cases between [0,1], in which case the scaling for decimals produces the same issue.

Expected behavior: I would like to be able to keep the location of the y-axes fixed despite the automatic scaling of the y-axis tick labels.

Attachment: image_55214119.zip

[Saravanan Madheswaran]

Hi Ben, 

 

Greetings form Syncfusion, 

 

We can achieve your requirement by using LabelExtent property of ChartAxis. The LabelExtent property helps to maintain even gap between axis title and axis labels.    

 

<syncfusion:SfChart x:Name="chart1" Grid.Row="0"> 

. . . 

    <syncfusion:SfChart.SecondaryAxis> 

        <syncfusion:NumericalAxis LabelExtent="50"/> 

    </syncfusion:SfChart.SecondaryAxis> 

. . . 

</syncfusion:SfChart> 

 

<syncfusion:SfChart x:Name="chart2" Grid.Row="1"> 

. . . 

            <syncfusion:SfChart.SecondaryAxis> 

                <syncfusion:NumericalAxis LabelExtent="50"/> 

            </syncfusion:SfChart.SecondaryAxis> 

. . . 

        </syncfusion:SfChart> 

<syncfusion:SfChart x:Name="chart3" Grid.Row="2"> 

. . . 

            <syncfusion:SfChart.SecondaryAxis> 

                <syncfusion:NumericalAxis LabelExtent="50"/> 

            </syncfusion:SfChart.SecondaryAxis> 

. . .             

        </syncfusion:SfChart> 

 

UG: https://help.syncfusion.com/uwp/charts/axis#labelextent  

 

 

 

Regards, 

Saravanan.