Chart height/width

[Marco Bellini]

Hi, 

I'm trying to size the chart, with no luck.

This is my xaml:

  <chart:SfChart BackgroundColor="Teal" HeightRequest="200" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0">
                                <chart:DoughnutSeries StartAngle="180" CircularCoefficient="1" EndAngle="360" EnableAnimation="true" ItemsSource="{Binding MainTarget.ChartDataPoints}">
                                    <chart:DoughnutSeries.ColorModel>
                                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding MainTarget.Colors}" />
                                    </chart:DoughnutSeries.ColorModel>
                                </chart:DoughnutSeries>
                            </chart:SfChart>

and the result is in the attached image; why there is so much bottom/top margin? How can I set margin between the chart and is container?

MB

Attachment: Schermata_20190206_alle_17.35.36.png_7af36d0d.zip

[Bharathiraja K]

Hi Macro, 

 

Greetings from Syncfusion. When you set layout option FillAndExpand, it will take the available size and will not consider HeightRequest and WidthRequest. So, we suggest you set layout options Center on any other except Fill and FillAndExpand.  

 

Code Snippet [XAML] 

<chart:SfChart BackgroundColor="Teal" HeightRequest="200" VerticalOptions="Center" HorizontalOptions="Center"> 

   </chart:SfChart> 

 

Query: How can I set margin between the chart and is container? 

 

Please refer our KB for remove padding from chart container. 

KB link: https://www.syncfusion.com/kb/9606/how-to-remove-the-default-padding-of-xamarin-forms-sfchart  

 

Thanks, 

Bharathiraja. 

[Marco Bellini]

Hi, thank you for the answer, but after I applied your suggestion (and the content of the KB article) I still have the same problem (see attachment).

<local:NoPaddingChart BackgroundColor="Teal" WidthRequest="240" HeightRequest="120" HorizontalOptions="Center" VerticalOptions="Center" Margin="0">
                                <chart:DoughnutSeries StartAngle="180" CircularCoefficient="1" EndAngle="360" EnableAnimation="true" ItemsSource="{Binding MainTarget.ChartDataPoints}">
                                    <chart:DoughnutSeries.ColorModel>
                                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding MainTarget.Colors}" />
                                    </chart:DoughnutSeries.ColorModel>
                                </chart:DoughnutSeries>
                            </local:NoPaddingChart>

Marco

Attachment: Schermata_20190207_alle_12.15.42.png_4d432442.zip

[Bharathiraja K]

Hi Macro, 

 

Thanks for your update. To change the doughnut radius size, we suggest you set CircularCoefficient value as 1. Please refer the below UG link for more details. 

 

UG link: https://help.syncfusion.com/xamarin/sfchart/charttypes#changing-the-doughnut-size  

 

However, it will show some space in top and bottom position when using semicircular doughnut chart. We are calculating square bounds from the available chart size and draw the doughnut circle from the center position of calculated bounds. 

 

Hence, when drawing semicircular doughnut, it will be drawing the Arc segment in top area of center position and finally we position this Arc segment center to the calculated bounds. So, it will show space in top and bottom when you use semicircular doughnut chart. This is the actual behavior. 

 

Please let us know, if you have any queries on this 

 

Thanks, 

Bharathiraja. 

[Marco Bellini]

Hi,

as you can see, I've already set CircularCoefficient="1"; I think this behavior is not acceptable, a control should takes the space he needs, not more. In this way I cannot place the chart inside a panel with other element, so it's useless to me.

Thank you for your support.

MB

[Devakumar Dhanapoosanam]

Hi Marco Bellini, 

 

Sorry for the inconvenient caused.  

 

As of now you can achieve your requirement as a workaround by setting the same value for the chart HeightRequest and WidthRequest property. 

 

Please refer the below code snippet: 

CodeSnippet[XAML]: 

<chart:SfChart x:Name="chart" BackgroundColor="Teal"  

                        HorizontalOptions="Center" VerticalOptions="Center"  

                        HeightRequest="400" WidthRequest="400"> 

                        ……  

</chart:SfChart> 

 

Screenshot: 

 

 

 

And we have prepared a simple sample for your requirement and you can download the sample from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142499/ze/142499-1096455319.zip  

 

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

 

Regards, 

Devakumar