How to make the space around a Line Chart look balanced?

[Contractor]

I've got a SFChart rendering two LineSeries, as shown in the .png file in the attached zip.

The space that the chart fills is the whole white background area (it is positioned there exactly using a RelativeLayout).

• var graphPane = new SFChart { BackgroundColor = Color.White };

For some reason there is a very large margin to the left of the chart, and the bottom of the chart.

How do I ascribe a margin to the left SecondaryAxis, and below the PrimaryAxis, that is the same as the right margin and top margin, respectively?

i.e. How do I get rid of the volume of white space so that the volume of white space is equally distributed on all four sides of the graph?

Attachment: before_71b0d698.zip

[Contractor]

Here's the GetChart method that the RelativeLayout uses to get the chart and lay it out:

        private SfChart GetChart()

        {

            // Create Graph Chart            

            var graphPane = new SfChart

            {

                BackgroundColor = Color.White,

                PrimaryAxis = new CategoryAxis { Interval = 1, PlotOffset = 0, AxisLineOffset = 0, MajorTickStyle = new ChartAxisTickStyle { TickSize = 0 }, ShowMajorGridLines = true, LabelStyle = new ChartAxisLabelStyle { LabelsPosition = AxisElementPosition.Outside, Margin = new Thickness(0,5 ,0,0) }, AxisLineStyle = new ChartLineStyle { StrokeColor = Color.FromRgb(215, 215, 215), StrokeWidth = 1 }, MajorGridLineStyle = new ChartLineStyle { StrokeColor = Color.FromRgb(241, 241, 241) }, },

                SecondaryAxis = new NumericalAxis { PlotOffset = 0, AxisLineOffset = 0, LabelStyle = new ChartAxisLabelStyle { LabelsPosition = AxisElementPosition.Outside, Margin = new Thickness(0,0,0,0) }, AxisLineStyle = new ChartLineStyle { StrokeColor = Color.FromRgb(215, 215, 215), StrokeWidth = 1 }, MajorTickStyle = new ChartAxisTickStyle { TickSize = 0 }, MajorGridLineStyle = new ChartLineStyle { StrokeColor = Color.FromRgb(241, 241, 241) } },

            };

            graphPane.HorizontalOptions = LayoutOptions.StartAndExpand;

            // Create Data Series

            // 1. Demo Series

            demoSeries = new LineSeries

            {   

                EnableDataPointSelection = true,

                Color = Color.FromRgb(81,146, 216),

                DataMarker = new ChartDataMarker { ShowLabel = false },

                StrokeWidth = 1,

            };

            // 2. Sales Series

            salesSeries = new LineSeries

            {

                Color = Color.FromHex("fecb2f"),

                DataMarker = new ChartDataMarker { ShowLabel = false },

                StrokeWidth = 1

            };

            // Add Series to Chart

            graphPane.Series.Add(demoSeries);

            graphPane.Series.Add(salesSeries);

            return graphPane;

        }

The data is added top both series separately and as you can see from the attached image, it looks great with data in it.

The question, as said, is all about the white margin.

[Yuvaraj Palanisamy]

Hi Contractor,

Thanks for using Syncfusion products.

We have analyzed the reported query, and you can remove the default margin for Chart as shown in the below code snippet.

Android project
Add the following code in constructor of MainActivity class.
[C#]

Xamarin.Forms.Forms.ViewInitialized += (sender, e) =>
{
         if (e.NativeView is SfChart)
                e.NativeView.SetPadding( 0, 0, 0, 0);
};

iOS Project
Add the following code in FinishedLaunching method of AppDelegate class.
[C#]

Xamarin.Forms.Forms.ViewInitialized += (sender, e) =>
{
         if (e.NativeView is SFChart)
                (e.NativeView as SFChart).EdgeInsets = new EdgeInsets( 0, 0, 0, 0);
};

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

Thanks,
Yuvaraj

[Contractor]

Hi Yuvaraj, thanks for being so quick!
But this is in the Xamarin.Forms forum, not the Android or iOS one, could you possibly show how to do it in Xamarin.Forms as we are trialing Syncfusion across all of iOS, Android, and Windows, but in Xamarin.Forms and not in the Xamarin.Android or Xamarin.iOS native projects.

Btw, apart from the margin problem, they are very impressed here with Syncfusion's Xamarin SFChart control!
Thanks!

[Contractor]

Hi Yuvaraj, thanks for being so quick!
But this is in the Xamarin.Forms forum, not the Android or iOS one, could you possibly show how to do it in Xamarin.Forms as we are trialing Syncfusion across all of iOS, Android, and Windows, but in Xamarin.Forms and not in the Xamarin.Android or Xamarin.iOS native projects.

Btw, apart from the margin problem, they are very impressed here with Syncfusion's Xamarin SFChart control!
Thanks!

PS - or if it can only be done by responding to the Xamarin.Forms.Forms.ViewInitialized event in the host project, could you please also give a code snippet for Windows Phone 8.1, Windows 8.1, and if you have it (with Windows 10 being released in a week or so), Windows 10 UAP?

Kind regards!

[Yuvaraj Palanisamy]

Hi Contractor,

Yes, as of now there is no property in Xamarin.Forms View to customize the padding, so you have to customize it from individual project. Currently our Xamarin.Forms controls does not support Windows Phone 8.1 and Windows 8, and this support will be available in our Volume 2 service pack 1 release. UWP support for Xamarin.Forms will be available after the official release of UWP and official support provided by Xamarin for Xamarin.Forms.

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

Thanks,
Yuvaraj