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 decide the height for sfchart

Thread ID:

Created:

Updated:

Platform:

Replies:

150770 Jan 19,2020 06:19 PM UTC Jan 21,2020 07:01 AM UTC Xamarin.Forms 4
loading
Tags: SfChart
dev clinicea
Asked On January 19, 2020 06:19 PM UTC

Hi,

I am adding multiple charts to a stacklayout, but the charts are not drawing up correctly - screenshot attached.

In order to display a chart, I know I need to provide HeightRequest for each chart. In order to give the HeightRequest for each chart, I need to know the height of the available screen available. My queries are:
1. Is there a way to figure out how much height is available on a screen to figure out the heightRequest to be given for the sfchart?
2. Instead of giving the heightrequest to the chart, is there a way to get the sfchart to autosize to take up the available space on a screen?

Tx
Dev

Attachment: Screenshot_1579433743_90c3cce7.zip

Hemalatha Marikumar [Syncfusion]
Replied On January 20, 2020 11:39 AM UTC

Hi Dev Clinicea, 
  
Greetings from Syncfusion. 
  
Query 1: Is there a way to figure out how much height is available on a screen to figure out the heightRequest to be given for the sfchart? 
  
Yes. You can get the height of screen size by using the OnSizeAllocated override method as in below code snippet. 
  
C#: 
protected override void OnSizeAllocated(double width, double height) 
{ 
     //here you can get the Height and Width of the screen or the current page 
     base.OnSizeAllocated(width, height); 
} 
  
Query 2:  Is there a way to get the sfchart to autosize to take up the available space on a screen? 
  
Yes. It is possible to render the SfChart with autosize by having parent layout as StackLayout, it will auto size to take up the available space on a screen by setting HorizontalOptions and VerticalOptions as FillAndExpand as per the below code snippet.  
 
XAML: 
 
<chart:SfChart x:Name="chart1" HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand"> 
      ….. 
</chart:SfChart> 
…. 
<chart:SfChart x:Name="chart2" HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand"> 
      ….. 
</chart:SfChart> 
 
  
Please let us know if you need any further assistance. 
 
Regards, 
Hemalatha M. 


dev clinicea
Replied On January 20, 2020 01:30 PM UTC

Both of these options don't work
1. If I wait till OnSizeAllocated to find the available height and then set the height to the chart component, it starts a recursive loop, where the OnSizeAllocated, keeps on calling itself.

2. By setting HorizontalOptions and VerticalOptions as FillAndExpand for a chart, if there are 5 or 6 charts on a screen, nothing gets drawn on the user interface. Each chart becomes so small, that you cannot see anything.

This is why, what I want to do, is find the available screen height and then set that as the HeightRequest on each chart, so that each chart gets to draw itself properly.

dev clinicea
Replied On January 20, 2020 02:05 PM UTC

Hi,
It worked. I reset the height of the chart inside the OnSizeAllocated method. Tx

Hemalatha Marikumar [Syncfusion]
Replied On January 21, 2020 07:01 AM UTC

Hi Dev Clinicea, 
 
Thanks for your update. 
 
We are glad to hear that given solution works from your last update. 
 
Please let us know if you need any further assistance. 
 
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