How to decide the height for sfchart

[dev clinicea]

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]

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]

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]

Hi,

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

[Hemalatha Marikumar]

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.