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.

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

Comments

How to add the chart inside StackLayout/ScrollView

Access denied