Articles in this section
Category / Section

How to add the chart inside StackLayout/ScrollView

1 min read

When you add SfChart as a child of StackLayout/ScrollView, you will see a blank screen with no chart rendered. This happens because StackLayout/ScrollView control measures its children with the respective control’s minimum height for vertical orientation and minimum width for horizontal orientation. Since the chart control’s minimum height and width are zero, it appears blank. Hence, in order to avoid this, set the VerticalOptions/HorizontalOptions property of the SfChart to FillAndExpand to plot the chart in the available (remaining) space.

C#

StackLayout layout = new StackLayout();
 
SfChart pieChart = new SfChart();
pieChart.VerticalOptions = LayoutOptions.FillAndExpand;
layout.Children.Add(pieChart);
 
SfChart columnChart = new SfChart();
columnChart.VerticalOptions = LayoutOptions.FillAndExpand;
layout.Children.Add(columnChart);
 
Content = layout;

 

XAML

<StackLayout>   
   <chart:SfChart x:Name="PieChart" VerticalOptions="FillAndExpand">    
…
   </chart:SfChart>
 
   <chart:SfChart x:Name="ColumnChart" VerticalOptions="FillAndExpand">      
…    
   </chart:SfChart>
</StackLayout>

 

Screenshot:

C:\Users\yuvaraj.palanisamy\Pictures\android.png

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied