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. Image for the cookie policy date
close icon

Chart Data and Range Selector slider overlap


I tried to work with the the Range Navigator, supplied as an example. However, both the chart and the time range slider are over lapping. I then tried to take a sample from the forum at, https://www.syncfusion.com/forums/128180/how-to-apply-custom-font-to-x-axis-labels-in-datetimerangenavigator and still I see the same problem.

I tried it both on the emulator and on an android phone. Interestingly, the RangeNavigator example on the "Syncfusion Controls Explorer" app, works, as desired.


Visual Studio 2017

Emulator : Android

Phone : Android Based

Any help will be appreciated

Below is the Code

1. SamplePage.xaml.cs

using System;

using System.Collections.Generic;

using Syncfusion.SfChart.XForms;

using Xamarin.Forms;

using Syncfusion.RangeNavigator.XForms; 

using Xamarin.Forms.Internals;

namespace RangeExample


    [Preserve(AllMembers = true)]

    public partial class SamplePage : ContentPage


        public SamplePage()




            ((SfChart)RangeNavigator.Content).Series.Add(new SplineAreaSeries() { ItemsSource = series.ItemsSource, XBindingPath = "XValue", YBindingPath = "YValue" });


        void nac_RangeChanged(object sender, Syncfusion.RangeNavigator.XForms.RangeChangedEventArgs e)


            dateTimeAxis.Minimum = e.ViewRangeStartDate;

            dateTimeAxis.Maximum = e.ViewRangeEndDate;




2. SamplePage.xaml





























                          XBindingPath="XValue" YBindingPath="YValue"/>






                          XBindingPath="XValue" YBindingPath="YValue" HeightRequest = "150">








3. RangeSelectorViewModel.cs

using System;

using System.Collections.ObjectModel;

using Syncfusion.SfChart.XForms;

using Xamarin.Forms.Internals;

namespace RangeExample


    [Preserve(AllMembers = true)]

    public class RangeSelectorViewModel


        public ObservableCollection DateTimeRangeData { get; set; }

        public RangeSelectorViewModel()


            DateTimeRangeData = new ObservableCollection


                new ChartDataPoint(new DateTime(2015, 01, 1), 14),

                new ChartDataPoint(new DateTime(2015, 02, 1), 54),

                new ChartDataPoint(new DateTime(2015, 03, 1), 23),

                new ChartDataPoint(new DateTime(2015, 04, 1), 53),

                new ChartDataPoint(new DateTime(2015, 05, 1), 25),

                new ChartDataPoint(new DateTime(2015, 06, 1), 32),

                new ChartDataPoint(new DateTime(2015, 07, 1), 78),

                new ChartDataPoint(new DateTime(2015, 08, 1), 100),

                new ChartDataPoint(new DateTime(2015, 09, 1), 55),

                new ChartDataPoint(new DateTime(2015, 10, 1), 38),

                new ChartDataPoint(new DateTime(2015, 11, 1), 27),

                new ChartDataPoint(new DateTime(2015, 12, 1), 56),

                new ChartDataPoint(new DateTime(2015, 12, 31), 35)





Attachment: Screen_Shot_cee45d6c.zip

1 Reply

MP Michael Prabhu M Syncfusion Team November 21, 2018 11:22 AM UTC

Hi Akash, 

Greetings from Syncfusion, we have analyzed your query and we are not able to see the code added in SamplePage.xaml file, since most of the lines are blank. The chart and range navigator control will not be overlapped if it is positioned properly in its parent layout. So, it will be good if you post that code again or provide us the sample as an attachment in this forum to investigate further. You can also refer the code that we have used in "Syncfusion Controls Explorer" from the following location. 


Live Chat Icon For mobile
Up arrow icon