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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Setting Custom labels and interval on DateTime axis is not drawing the series

Thread ID:





144767 May 21,2019 03:36 PM UTC May 24,2019 08:32 AM UTC Xamarin.Forms 5
Tags: SfChart
Moin Faisal
Asked On May 21, 2019 03:36 PM UTC

I have data which is time, value to be plotted on areaseries with DateTime axis as the primary axis and Numeric Axis as the secondary axis.(like shown below)

I have tried the below code. 

<chart:SfChart x:Name="ChartControl" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Black" 
                               ChartPadding ="5" AreaBackgroundColor="Black"
                               AreaBorderColor="Black" AreaBorderWidth="3">
                        <chart:DateTimeAxis x:Name="XAxis" Interval="14400" IntervalType="Seconds" CrossesAt="0" ShowMinorGridLines="False" ShowMajorGridLines="False" LabelCreated="OnXAxisLabelCreated">
                            <chart:DateTimeAxis.LabelStyle >
                                <chart:ChartAxisLabelStyle LabelFormat="hh tt" />

                        <chart:NumericalAxis x:Name="YAxis" ShowMajorGridLines="False" ShowMinorGridLines="False" CrossesAt="{Binding Source={x:Static System:DateTime.Today}}">
                        <chart:AreaSeries x:Name="ChartSeries" ItemsSource="{Binding Data}" XBindingPath="Time" YBindingPath="Value" />

Code behind:
 private void OnXAxisLabelCreated(object sender, ChartAxisLabelEventArgs e)
            DateTimeAxis dateTimeAxis = (DateTimeAxis)sender;
            dateTimeAxis.Minimum = DateTime.Today;
            dateTimeAxis.Maximum = DateTime.Today.AddHours(23).AddMinutes(59).AddSeconds(59);
    //hiding the end labels
            if (e.LabelContent == "12 AM" || e.LabelContent == "11 PM")
                e.LabelStyle = new ChartAxisLabelStyle();
                e.LabelStyle.FontSize = 0.01f;
            if (e.LabelContent == "12 PM")
                e.LabelContent = "Noon";

Data coming from the model
 myDataCaptured = new List<DataCaptured>()
                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 3, 12,0), Value = 2.1 },
                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 6, 32,0), Value = 2.3 },
                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 5, 23,0), Value = 5.1 }                    

If  I set the DateTimeAxis.Maximum, then the DateTime axis is set well but the graph is not drawn.
If I remove the DateTimeAxis.Maximum, my graph gets rendered but the axis labels are not intact and the graph is beyond the width of the emulator.
PLease suggest a fix for this.

Bharathiraja K [Syncfusion]
Replied On May 22, 2019 11:52 AM UTC

Hi Faisal, 
Greetings from Syncfusion, Thanks for your code snippet, but we are not able to understand, what is the actual behavior you need, and not get the reason of setting datetimeAxis.Maximum at the time of Label created  
We have prepared the sample with your code snippet, please revert us by modifying the sample and provide us what issue you are facing and what is your expectation. Please provide any expected image that will help us to solve your issue earlier.  

Moin Faisal
Replied On May 22, 2019 04:23 PM UTC

Hi Bharati,

I have modified the sample code to reproduce the issue.
In the modified solution, 
Issues seen:
1. the x-axis does not show the labels 4Am, 8AM, Noon, 4PM and 8PM.
2. The graph has gone beyond the limits of the screen (atleast it appears so because the data beyond 3pm is not rendered within the window) 

Expected result: please see the below snapshot (the data should always span for the day between 12am to 11:59pm

Attachment: SimpleSampleModified_7e5c4327.zip

Saravanan Madheswaran [Syncfusion]
Replied On May 23, 2019 09:03 AM UTC

Hi Faisal, 
We have validated the given sample and we would like to let you know about the axis behavior, 
By default, the axis range will be calculated based on the given data collection. So, we suggest below 2 solution to achieve your requirement.  
Solution 1: Set Minimum and Maximum if you have only one day of data in collection.  
XAxis.Minimum = new DateTime(2019, 05, 12, 00, 00, 00); 
XAxis.Maximum = new DateTime(2019, 05, 12, 23, 59, 59); 
Solution 2: Set AutoScrollingDelta, 
This property used to ensure specified range of data always visible in chart, by default it shows recently added point, using ChartZoomPanBehavior you can scroll the chart to see previous points. 
<chart:DateTimeAxis EnableAutoIntervalOnZooming="False" x:Name="XAxis" Interval="4" IntervalType="Hours" AutoScrollingDelta="1" AutoScrollingDeltaType="Days" AutoScrollingMode="Start"  CrossesAt="0" LabelCreated="XAxis_LabelCreated"> 
. . . 
. . . 
. . . 
. . . 
                        <chart:ChartZoomPanBehavior EnableDoubleTap="False" EnablePanning="True" EnableSelectionZooming="False"/> 
We have modified the sample that will be downloaded from below link and we hope the given information will be help full to achieve your requirement.  

Moin Faisal
Replied On May 23, 2019 04:33 PM UTC

Thank you so much for the support. This works for me.

Saravanan Madheswaran [Syncfusion]
Replied On May 24, 2019 08:32 AM UTC

Hi Faisal,    
We are glad that the reported problem resolved at your end. Please let us know, if you have any other queries.  


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon