Remove all whitespace around chart

[Michael Nero]

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]

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]

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]

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