Gap between title and chart in iOS

[aijaja]

Hi, is there a way to get rid of gap between Chart title and chart area? The gap is there only for iOS, but in Android there is no gap.

Here is sample of code where Chart Title margin is 0.

using System.Collections.Generic;
using Xamarin.Forms;
using Syncfusion.SfChart.XForms;

namespace Test
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BindingContext = new ViewModel();
            InitializeComponent();
            SfChart chart = new SfChart();
            CategoryAxis primaryAxis = new CategoryAxis();
            chart.PrimaryAxis = primaryAxis;
            NumericalAxis secondaryAxis = new NumericalAxis();
            chart.SecondaryAxis = secondaryAxis;
            chart.Title = new ChartTitle();
            chart.Title.Text = "Test report";
            chart.Title.Margin = 0;
            ColumnSeries series = new ColumnSeries();
            series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
            series.XBindingPath = "Name";
            series.YBindingPath = "Height";
            chart.Series.Add(series);
            Content = chart;
        }
    }

    public class Person
    {
        public string Name { get; set; }
        public double Height { get; set; }
    }

    public class ViewModel
    {
        public List<Person> Data { get; set; }

        public ViewModel()
        {
            Data = new List<Person>()
            {
                new Person { Name = "David", Height = 180 },
                new Person { Name = "Michael", Height = 170 },
                new Person { Name = "Steve", Height = 160 },
                new Person { Name = "Joel", Height = 182 }
            };
        }
    }
}

I'm attaching screenshots from Android and iOS, can see that there is no gap in Android, in iOS the gap marked red.

Attachment: gap_in_ios_1c936025.zip

[Divya Venkatesan]

 Hi Aija, 

 

You can remove the gap between chart title and chart area in iOS by setting platform specific value for Margin using Device.OnPlatform() method. Please find the code snippet below. 

 

chart.Title.Margin = Device.OnPlatform(-10, 0, 0); 

 

 

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

 

Regards, 

Divya Venkatesan 

[aijaja]

Thanks, it helped, only rather than setting all margins to -10, I set only bottom, otherwise the title went on top of the status bar - outside of app.
Like:
Device.OnPlatform<Thickness>(new Thickness(0,0,0,-10), new Thickness(0), new Thickness(0));

[Lakshmi Radha Krishnan]

Hi Aija, 

  

Thanks for the update. 

  

For your requirement, it is enough to set only the bottom value to the Margin property as you set. Please let us know, if you need any further assistance on this. 

  

Regards, 

Lakshmi R.