We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149430 Nov 26,2019 07:49 AM UTC Nov 28,2019 09:23 AM UTC Xamarin.Forms 3
loading
Tags: SfChart
Pawan Shakya
Asked On November 26, 2019 07:49 AM UTC

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 [Syncfusion]
Replied On November 27, 2019 09:01 AM UTC

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: 
 
  
And we have prepared a sample based your requirement and you can download the sample from the below link. 
  
  
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. 
  
 
  
Please let us know if need any further assistance. 
  
Regards, 
Hemalatha M. 


Pawan Shakya
Replied On November 27, 2019 10:46 AM UTC

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 [Syncfusion]
Replied On November 28, 2019 09:23 AM UTC

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. 
  
  
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon