How to rotate complete sfchart (FastLine Series - both axis ) layout to landscape for one page.

[Pawan Shakya]

Hi,

I am trying to rotate complete sfchart on one specific page to landscape type ( not rotating whole content page, only sfchart component ).

It comes fine for portrait but when I am trying to rotate with some below way (rotation angle and all) , this is not taking content area as expected.

Can someone please help me here.

<StackLayoutBackgroundColor="White">
<chart:SfChartRotation="-90"AreaBorderColor="Teal"HorizontalOptions="FillAndExpand"VerticalOptions="FillAndExpand">
<chart:SfChart.ChartBehaviors>
<chart:ChartZoomPanBehavior/>
chart:SfChart.ChartBehaviors>

<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis/>
chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis/>
chart:SfChart.SecondaryAxis>
<chart:SfChart.Title>
<chart:ChartTitleText="{BindingMetric}"TextColor="#5A5F6E"FontSize="16"FontFamily="{DynamicResourceBoldFontFamilyName}"/>
chart:SfChart.Title>
<chart:FastLineSeriesEnableAnimation="true"StrokeWidth="1"Color="#3671d1"EnableTooltip="true"ItemsSource="{BindingHistoricalDetails}"XBindingPath="Day"YBindingPath="Value"/>
chart:SfChart>
StackLayout>
ContentView>

[Hemalatha Marikumar]

Hi Pawan Shakya, 

  

Greetings from Syncfusion. 

  

Query: Trying to rotate with some below way (rotation angle and all) , this is not taking content area as expected. 

  

You can achieve this requirement by setting the IsTransposed to True in ChartSeries. This IsTransposed property is used to plot the chart vertically.  Please refer below code snippet. 

  

CodeSnippet[Xaml]: 

  

<chart:SfChart.Series> 

                <chart:FastLineSeries IsTransposed="True"  ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" /> 

</chart:SfChart.Series> 

  

  

Please refer below link to know more about IsTransposed: 

 

https://help.syncfusion.com/xamarin/charts/chartseries#transpose-the-series-vertical-chart 

  

And we have prepared a sample based your requirement and you can download the sample from the below link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/149430/ze/149430_ChartSample-209048443.zip 

  

Screenshot: 

  

 

  

  

If you want to change the Axis position means, you can use OpposedPosition and IsInversed properties which is available in ChartAxis. For more details please refer below UG links. 

  

https://help.syncfusion.com/xamarin/charts/axis#placing-axes-at-the-opposite-side 

 

https://help.syncfusion.com/xamarin/charts/axis#inversing-axis 

  

Please let us know if need any further assistance. 

  

Regards, 

Hemalatha M. 

[Pawan Shakya]

Hi Hemalatha, 

Thanks for your response and support. However my requirement is bit different form transposed which you have suggested.

Please refer attached zip file contains image my original vs Transposed image. 

Here Transpose seems to be fine when user rotate device towards LEFT for moving from portrait to landscape. In my requirement, I want user to rotate device towards RIGHT for moving from portrait to landscape.

Third image in zip file  "Required.png" which is my requirement where date are coming on x-axis (w.r.t landscape).  

Hope this clears, please let me know if you need anymore info in this regard. 

Attachment: Requirement_c0c25437.zip

[Hemalatha Marikumar]

Hi Pawan Shakya, 

  

Thanks for providing the screenshot to understand your requirement. 

  

We have validated your query and you can achieve this requirement by setting the HeightRequest and WidthRequest to Chart and changing the Chart HorizontalOptions based on the device orientation as per in below code snippet. 

  

Code Snippet [Xaml]: 

  

<StackLayout > 

        …… 

        <chart:SfChart x:Name="chart" AreaBorderColor="Teal" HeightRequest="350" WidthRequest="350" VerticalOptions="Start" > 

         …….. 

         </chart:SfChart> 

</StackLayout> 

  

 

  

Code Snippet [C#]: 

  

protected override void OnSizeAllocated(double width, double height) 

        { 

            base.OnSizeAllocated(width, height); 

  

            if (height > 0 && width > 0) 

            { 

                if (height > width) 

                { 

                    chart.HorizontalOptions = LayoutOptions.FillAndExpand; 

                } 

                else 

                { 

                    chart.HorizontalOptions = LayoutOptions.End; 

                } 

            } 

        } 

  

 

  

We have prepared a sample based on your requirement and you can download the sample from the below link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/149430/ze/149430_ChartRotate1110662535.zip 

  

Screenshots: 

 

 

Portrait
Landscape

 

 

  

Note: We have prepared sample using StackLayout only. Please change the Layout based on your requirement, if you are using any other layouts. 

  

Regards, 

Hemalatha M.