)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to plot date-time values in vertical axes?

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: May 8, 2018 |
Last Revised Date: June 27, 2019

To plot date-time values in y-axis, convert the date-time values to double while populating the items source for chart, and reverse the conversion (double to date-time) in the LabelCreated event of ChartAxis. By using the NumericalAxis with above conversions, you can display the date-time values in y-axis.

Code snippets

C#

public class ViewModel
{
        public ObservableCollection<ChartDataPoint> Data { get; set; }
 
        public ViewModel()
        {
            Data = new ObservableCollection<ChartDataPoint>();
 
            DateTime start = new DateTime(1970, 1, 1);
 
            //Converting date time value to its respective double value.
            Data.Add(new ChartDataPoint(new DateTime(2010, 1, 1), (new DateTime(2010, 1, 1, 1, 0, 0) - start).TotalMilliseconds));
            Data.Add(new ChartDataPoint(new DateTime(2010, 2, 1), (new DateTime(2010, 1, 1, 2, 0, 0) - start).TotalMilliseconds));
            Data.Add(new ChartDataPoint(new DateTime(2010, 3, 1), (new DateTime(2010, 1, 1, 3, 0, 0) - start).TotalMilliseconds));
            Data.Add(new ChartDataPoint(new DateTime(2010, 4, 1), (new DateTime(2010, 1, 1, 4, 0, 0) - start).TotalMilliseconds));
            Data.Add(new ChartDataPoint(new DateTime(2010, 5, 1), (new DateTime(2010, 1, 1, 5, 0, 0) - start).TotalMilliseconds));
        }
    }

XAML

<chart:SfChart >
    <chart:SfChart.PrimaryAxis>
        <chart:DateTimeAxis />
    </chart:SfChart.PrimaryAxis>
 
    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis LabelCreated="NumericalAxis_LabelCreated"/>
    </chart:SfChart.SecondaryAxis>
     . . .
</chart:SfChart>

C#

private void NumericalAxis_LabelCreated(object sender, Syncfusion.SfChart.XForms.ChartAxisLabelEventArgs e)
{
            double value = Convert.ToDouble(e.LabelContent);
            
            //Converting corresponding double value to data time value.
            DateTime date = (new DateTime(1970, 1, 1).AddMilliseconds(value));
            e.LabelContent = String.Format("{0:HH:mm}", date);
}

Sample application

http://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimeAxisSample2028789346-1995191234.zip

Output:

 Chart with date-time values in Y Axis in Xamarin.Forms

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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