How to add a chart to a grid - and use "Auto" for grid row height?

[John Dalsgaard]

I have just started using your charts. I would like to use a bar chart inside of a grid row. The bar chart's data will vary by user and thus I don't know the number of bars to be shown - and therefore, I would like to use the "Auto" height of the grid row.

But using that doesn't show the grid. I found this article: https://www.syncfusion.com/kb/5722/how-to-add-the-chart-inside-stacklayout-scrollview that gives an explanation. However, I cannot make it work with e.g. a StackLayout inside the grid (or even with the stacklayout just after the grid...).

This is the XAML I'm using:

                <Grid Padding="15,10" Margin="10,0,10,5" BackgroundColor="White">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Text="{Binding SpeciesCounterTitle}" Style="{StaticResource HeadingText}" />
                    <!-- Bar chart with species -->
                    <chart:SfChart Grid.Row="1" Grid.ColumnSpan="2" ChartPadding="0,5">
                        <chart:SfChart.PrimaryAxis>
                            <chart:CategoryAxis ShowMajorGridLines="False"/>
                        </chart:SfChart.PrimaryAxis>
                        <chart:SfChart.SecondaryAxis>
                            <chart:NumericalAxis ShowMajorGridLines="False" ShowMinorGridLines="False" IsVisible="False"/>
                        </chart:SfChart.SecondaryAxis>
                        <chart:BarSeries ItemsSource="{Binding SpeciesCounts}" XBindingPath="Name" YBindingPath="Count" Color="{StaticResource PrimaryAppColor}" Width="0.5">
                            <chart:BarSeries.DataMarker>
                                <chart:ChartDataMarker>
                                    <chart:ChartDataMarker.LabelStyle>
                                        <chart:DataMarkerLabelStyle LabelPosition="Outer" LabelFormat="{Binding BarLabelFormat}" Font="12" TextColor="Black" BackgroundColor="White"/>
                                    </chart:ChartDataMarker.LabelStyle>
                                </chart:ChartDataMarker>
                            </chart:BarSeries.DataMarker>
                        </chart:BarSeries>
                    </chart:SfChart>
                </Grid>

How can I obtain that without having to bind the height to a property and try to "guess" the height based on number of data sets?

Oh, and the other thing - there is quite some "white space" between each bar. I would like to make that much less - but how? I have been trying to experiment with "width" and "space" - but they just seem to make the bar narrower/thinner - and not affect the space between them...

[Hemalatha Marikumar]

Hi John Dalsgaard, 

 

Greetings from Syncfusion. 

 

How can I obtain that without having to bind the height to a property and try to "guess" the height based on number of data sets? 

 

We would like to let you know that “The chart control’s minimum height and width are zero, hence it appears blank in Grid even having auto. In order to avoid this, set the VerticalOptions/HorizontalOptions property of the SfChart to FillAndExpand to plot the chart in the available (remaining) space even in Grid layout. 

 

there is quite some "white space" between each bar. I would like to make that much less - but how? 

 

Provided Space and Width properties usage may be differed with used axis. Spacing – 0 and Width – 1 works for removing the white space between each bar in category axis as X axis. 

 

https://help.syncfusion.com/xamarin/charts/axis#category-axis 

 

https://help.syncfusion.com/xamarin/charts/charttypes#bar-chart 

 

If you are using X axis as Numerical axis with considered points are 10,14, 18..etc, then bar plot on 10 and second one plot on 14 but it seems like empty space between 10-14.  That is a default behavior with Numeric axis. Please check this and let us know. 

 

Regards, 

Hemalatha M. 

[John Dalsgaard]

Hi Hermalatha

Thanks for your response

Setting "FillAndExpand" doesn't really make any difference. But what I do is just calculate the height of the grid row based on the number of bars. That seems to work - I just normally prefer to use "Auto" to make it show correctly on different screen sizes.

And for the space between each bar I found out that if I limited the height per row (calculated) and used width and spacing like this:

<chart:BarSeries ItemsSource="{Binding SpeciesCounts}" XBindingPath="Name" YBindingPath="Count" Color="{StaticResource PrimaryAppColor}" Width="0.8" Spacing="0" EnableAnimation="True">

Then it works :-)

[Suyamburaja Jayakumar]

Hi John Dalsgaard, 

 

Thanks for your patience.  

 

We have ensured that bar height with applying that in Grid with auto which is worked as per in below sample 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/153214814813717.zip  

 

We are not clear about your reported query, could you please update us with more details which will be helpful for us to analyze the reported issue. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Suyamburaja J.