Unable to use DateTimeCategoricalAxes in Horizontal axes

Thread is closed for posting
2 posts, 0 answers
  1. Misha
    Misha avatar
    2 posts
    Member since:
    Jan 2014

    Posted 13 Jan 2014 Link to this post

    <UserControl x:Class="Telerik.Examples.WP.Chart.Series.BarVertical"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        d:DesignHeight="480" d:DesignWidth="480">
        <Grid x:Name="LayoutRoot">
            <telerikChart:RadCartesianChart Margin="12,0,0,0" x:Name="radChart1" Background="White">
                    <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">
                            <SolidColorBrush Color="#33666666"/>
                            <SolidColorBrush Color="Transparent"/>
                    <telerikChart:DateTimeCategoricalAxis LineStroke="Black" ElementBrush="Black">
                    <telerikChart:LinearAxis Minimum="0"
                <telerikChart:BarSeries Background ="White">
                        <Rectangle Fill="Blue"/>
                <telerikChart:LineSeries StrokeThickness="5" Stroke="Green"/>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Charting;
    //using Telerik.Charting;
    using Telerik.Windows.Controls;
    using Telerik.Windows.Controls.Chart;
    namespace Telerik.Examples.WP.Chart.Series
        public partial class BarVertical : UserControl
            public BarVertical()
                this.radChart1.Series[0].ItemsSource = new double[] { 40, 45, 30, 50, 52, 60 };
                this.radChart1.Series[1].ItemsSource = new double[] { 90, 60, 30, 70, 80, 85 };
                DateTimeCategoricalAxis categoricalAxis = new DateTimeCategoricalAxis();
                categoricalAxis.DateTimeComponent = DateTimeComponent.Day;
                categoricalAxis.PlotMode = AxisPlotMode.BetweenTicks;
                categoricalAxis.LabelFormat = "{0:m}";
                //First assign the axis to the VerticalAxis property and then add the series to the chart
                this.radChart1.Series[0].HorizontalAxis = categoricalAxis;
    Horizontal axes are still showing 1,2,3 and not the Actual date/time. Please let me know what else I need to add.
  2. Rosy Topchiyska
    Rosy Topchiyska avatar
    586 posts

    Posted 14 Jan 2014 Link to this post

    Hello Misha,

    Thank you for contacting us.

      First you will need to set the ItemsSource of the series to a collection of items that have a property of type DateTime.
     Then you have to set the CаtegoryBinding of the series to the DateTime property. If the CategoryBinding is not set, the chart automatically sets the categories of the data points to 1, 2, 3...
     I have attached a sample project to demonstrate how you can setup the chart in order to display the categories properly.

    I hope this was useful. Please, do not hesitate to contact us if you have further questions.

    Rositsa Topchiyska
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top