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

How use TimeSpan Axe

HI all,

I am new on syncfusion products and I met some trouble with syncfusion chart control.
I am pretty sure it's pretty easy but i don't figure out.

I try to make a column chart with a category primary axis and a timespan secondary axis but I get a InvalidCastException: Unable to cast object of type 'System.TimeSpan' to type 'System.IConvertible'.

Code below :


<chart:SfChart x:Name="columnChart" AreaBorderBrush="#8e8e8e" Background="White" Grid.Row="0">
                    <TextBlock FontSize="22"   Foreground="Black" FontFamily="Segoe UI">Time spend by application</TextBlock>
                    <chart:CategoryAxis  Header="Applications" Foreground="Black"  FontSize="20" LabelTemplate="{StaticResource labelTemplate}"/>
                    <chart:TimeSpanAxis  FontSize="20" Minimum="0" Maximum="500" Interval="50"   Header="Time (in Min)" Foreground="Black" LabelTemplate="{StaticResource labelTemplate}"/>
                <chart:ColumnSeries EnableAnimation="True" Palette="Metro" ItemsSource="{Binding ApplicationTime}"  XBindingPath="ApplicationName" YBindingPath="Time" Label="Sneakers sold" chart:ChartTooltip.EnableAnimation="true" ShowTooltip="True"> ...

View Model :

public class ViewModel
        public ObservableCollection<Model> ApplicationTime { get; set; }

        public ViewModel()
            ApplicationTime = new ObservableCollection<Model>();
            ApplicationTime.Add(new Model { ApplicationName = "Visual Studio 2013", Time = new TimeSpan(1,40,30)});

Model :

    public class Model
        public TimeSpan Time { get; set; }
        public string ApplicationName { get; set; }

Maybe I have to herit System.TimeSpan class to implements IConvertible (to convert it to double) ?


5 Replies

SS Sheik Syed Abthaheer M Syncfusion Team March 4, 2015 05:43 AM UTC

Dear Customer,

Thanks for using Syncfusion products.

At present we are not having TimeSpanAxis support for chart secondary axis. However we have meet your requirement in workaround by converting TimeSpan value to double. Please find the sample in the below location.

Sample: TimeSpan_Sample.zip

Please let us know if have any queries.


AU Autofocus March 4, 2015 12:56 PM UTC

Thank you very much. It works as expected.

SS Sheik Syed Abthaheer M Syncfusion Team March 5, 2015 04:58 AM UTC

Dear Customer,

Thanks for your update.

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


PE Peter January 17, 2020 01:03 PM UTC


I'm having same problem with TimeSpanAxis as 2nd axis. Same exception.
I wanted to see the workaround example for converting to double, however access to that file is denied.


HM Hemalatha Marikumar Syncfusion Team January 20, 2020 12:45 PM UTC

Hi Peter, 
Greetings from Syncfusion. 
You can achieve this requirement with the help of TimeSpanAxis in SecondaryAxis by converting the TimeSpan values to double.  And you can customize the axis labels format using LabelCreated event as per the below code snippet. 
Code Snippet [Xaml]: 
            <chart:TimeSpanAxis LabelCreated="NumericalAxis_LabelCreated" > 
Code Snippet [C#]: 
private void NumericalAxis_LabelCreated(object sender, LabelCreatedEventArgs e) 
            TimeSpan Value = TimeSpan.Parse(e.AxisLabel.LabelContent as string); 
            DateTime date = (new DateTime(1970, 1, 1).AddMilliseconds(Value.TotalMilliseconds)); 
            e.AxisLabel.LabelContent = String.Format("{0:HH:mm}", date); 
And we have prepared a sample based on your requirement and download the sample from the below location. 
Please let us know if need any further assistance on this. 
Hemalatha M. 

Live Chat Icon For mobile
Up arrow icon