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

Remove all whitespace around chart

Thread ID:

Created:

Updated:

Platform:

Replies:

119595 Jul 12,2015 05:34 PM UTC Jul 14,2015 12:33 PM UTC Xamarin.Forms 3
loading
Tags: SfChart
Michael Nero
Asked On July 12, 2015 05:34 PM UTC

Hi, I'm currently evaluating SfChart. I'm trying to remove all whitespace around a doughnut chart, but something's not right, and I'm not sure where to go from here.

I have the following XAML, which seems to me would sufficiently hide all of the whitespace around a chart, but it doesn't. The actual chart shows up very tiny, and doesn't fill the entire space available to it. Are there additional options that I'm not aware of that will get the chart to fill all of the available space?

<chart:SfChart
x:Name="Chart"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="33"
WidthRequest="33"
BackgroundColor="Transparent">
<chart:SfChart.Title>
<chart:ChartTitle Margin="0" Text="" />
</chart:SfChart.Title>
<chart:SfChart.Legend>
<chart:ChartLegend
IsVisible="False"
IsIconVisible="False" />
</chart:SfChart.Legend>
<chart:SfChart.Series>
    <chart:DoughnutSeries
    ItemsSource="{Binding ReportingData}"
    XBindingPath="Name"
    YBindingPath="Value"
    DoughnutCoefficient="0.75"
    EnableDataPointSelection="False"
    LegendIcon="None">
    <chart:DoughnutSeries.DataMarker>
    <chart:ChartDataMarker
    ShowLabel="False"
    ShowMarker="False" />
</chart:DoughnutSeries.DataMarker>
<chart:DoughnutSeries.ColorModel>
<chart:ChartColorModel Palette="Custom">
<chart:ChartColorModel.CustomBrushes>
<Color>#EDF065</Color>
<Color>#00D07C</Color>
</chart:ChartColorModel.CustomBrushes>
</chart:ChartColorModel>
</chart:DoughnutSeries.ColorModel>
</chart:DoughnutSeries>
</chart:SfChart.Series>
</chart:SfChart>

Manivannan Elangovan [Syncfusion]
Replied On July 13, 2015 11:28 AM UTC

Hi Michael,


Thanks for using Syncfusion products.


We have analyzed your query and with the provided code snippet, very low value for HeightRequest and WidthRequest has been given for chart. Chart renders based on the available height and width. There is a property named “CircularCoefficient" in DoughnutSeries to control the space around the segments. It takes value from 0 to 1. To remove all white space around a doughnut, the CircularCoefficient property value should be 1.


We have prepared a sample based on your requirement. Please download the sample from below location.


Sample: Doughnut


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


Thanks,
Manivannan.E


Michael Nero
Replied On July 13, 2015 02:58 PM UTC

Thanks for the quick reply! However, I believe something's not right still. I tried setting the CircularCoefficient property on the series, but the doughnut still doesn't fill the entire space available to it. Take a look at the following XAML where the parent Grid has a 33x33 size, and the chart's HorizontalAlignment and VerticalAlignment properties are set to FillAndExpand. I'd expect the chart to fill the entire space available to it, but it doesn't.  As you can see, I've also set a bunch of other properties trying to get this work.

<Grid
Grid.Row="0" Grid.Column="1"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="33"
HeightRequest="33"
BackgroundColor="Black"
Padding="0,0,0,0">

<Label
Text="{Binding PercentComplete, Converter={StaticResource PercentCompleteToStringConverter}}"
FontSize="9"
TextColor="#858585"
HorizontalOptions="Center"
VerticalOptions="Center" />

<chart:SfChart
x:Name="Chart"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<chart:SfChart.Title>
<chart:ChartTitle Margin="0" Text="" />
</chart:SfChart.Title>
<chart:SfChart.Legend>
<chart:ChartLegend
IsVisible="False"
IsIconVisible="False"
ItemMargin="0" />
</chart:SfChart.Legend>
<chart:SfChart.Series>
        <chart:DoughnutSeries
        ItemsSource="{Binding ReportingData}"
        XBindingPath="Name"
        YBindingPath="Value"
        DoughnutCoefficient="0.80"
        CircularCoefficient="1"
        EnableDataPointSelection="False"
        LegendIcon="None"
        DataMarkerPosition="Inside">
        <chart:DoughnutSeries.DataMarker>
        <chart:ChartDataMarker
        ShowLabel="False"
        ShowMarker="False"
        MarkerBorderWidth="0"
        MarkerWidth="0"
        MarkerHeight="0" />
</chart:DoughnutSeries.DataMarker>
<chart:DoughnutSeries.ColorModel>
<chart:ChartColorModel Palette="Custom">
<chart:ChartColorModel.CustomBrushes>
<Color>#EDF065</Color>
<Color>#00D07C</Color>
</chart:ChartColorModel.CustomBrushes>
</chart:ChartColorModel>
</chart:DoughnutSeries.ColorModel>
</chart:DoughnutSeries>
</chart:SfChart.Series>
</chart:SfChart>

</Grid>

I am able to get the chart to fill the entire space by implementing a custom renderer and setting up the chart like this:

// Inside custom renderer
var chart = new SFChart ();
chart.Frame = this.Frame;
chart.Legend.Visible = false;
chart.Legend.ItemMargin = new UIKit.UIEdgeInsets (0, 0, 0, 0);
chart.ClearChartBehaviors ();
chart.EdgeInsets = new UIKit.UIEdgeInsets (0, 0, 0, 0);
chart.Title.EdgeInsets = new UIKit.UIEdgeInsets (0, 0, 0, 0);

public class SurveyProgressChartDataSource : SFChartDataSource
{
// ... Rest of SFChartDataSource implementation removed for brevity

public override SFSeries GetSeries (SFChart chart, nint index)
{
SFDoughnutSeries series = new SFDoughnutSeries ();
series.DoughnutCoefficient = 0.80f;
series.BorderWidth = 0;
series.DataMarker.MarkerBorderWidth = 0;
series.DataMarker.MarkerWidth = 0;
series.DataMarker.ShowLabel = false;
series.DataMarker.ShowMarker = false;
series.DataMarkerPosition = SFChartCircularSeriesLabelPosition.Inside;

series.ColorModel.Palette = SFChartColorPalette.Custom;

var colors = new NSMutableArray ();
colors.Add (Color.FromHex ("#EDF065").ToUIColor ());
colors.Add (Color.FromHex ("#00D07C").ToUIColor ());
series.ColorModel.CustomColors = colors;

return series;
}
}

Manivannan Elangovan [Syncfusion]
Replied On July 14, 2015 12:33 PM UTC

Hi Michael,


We can achieve your requirement by setting value for EdgeInsets property in our native SFChart and need not to create custom renderer. We can get the Native SFChart from Main.cs class in iOS project, here we can set the value for EdgeInsets property as shown in the below code snippet.


CodeSnippet:


static void Main(string[] args)

{

            Xamarin.Forms.Forms.ViewInitialized += Xamarin_Forms_Forms_ViewInitialized;

            UIApplication.Main(args, null, "AppDelegate");

}


static void Xamarin_Forms_Forms_ViewInitialized (object sender, Xamarin.Forms.ViewInitializedEventArgs e)

{

            if(e.NativeView is SFChart)

                        (e.NativeView as SFChart).EdgeInsets = new UIEdgeInsets (0, 0, 0, 0);

 }


We have prepared a sample based on your requirement. Please download the sample from below location.


Sample: Doughnut


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


Thanks,

Manivannan.E


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.

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

;