We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart height/width

Thread ID:

Created:

Updated:

Platform:

Replies:

142499 Feb 6,2019 04:38 PM UTC Feb 12,2019 01:22 PM UTC Xamarin.Forms 5
loading
Tags: SfChart
Marco Bellini
Asked On February 6, 2019 04:38 PM UTC

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 [Syncfusion]
Replied On February 6, 2019 05:46 PM UTC

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. 
 
Thanks, 
Bharathiraja. 


Marco Bellini
Replied On February 7, 2019 01:01 PM UTC

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 [Syncfusion]
Replied On February 8, 2019 06:56 AM UTC

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. 
 
 
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
Replied On February 8, 2019 08:25 AM UTC

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 [Syncfusion]
Replied On February 12, 2019 01:22 PM UTC

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. 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;