Problems with axis labels overlapping/smashing together

4 posts, 0 answers
  1. Lauren Belella
    Lauren Belella avatar
    1 posts
    Member since:
    Feb 2010

    Posted 15 Dec 2011 Link to this post

    I have a chart that is data-bound to an ObservableCollection of objects in my ViewModel. Once a second "OnPropertyChanged" is triggered where the chart updates itself. This seems to work well for drawing the actual charting area. The problem occurs with the axis labels and ticks, where the chart renders far too many of them into the view. Seemingly sporadically, the chart will adjust how these labels are drawn and that sometimes alleviates the problem, but generally speaking they are completely unreadable. The LabelFitMode property is ostensibly useless, as all three options (none, multiline, rotate) will eventually overlap/smash the labels.

    If I could force the chart to readjust it's labels every time my data binding is updated that would be great, but the UpdateLayout() methods seem to have no effect to this end. I've also tried manually calculating the label intervals for the axises after the binding update occurs. With an elapsed time axis this has some limited success, but for large values (15000+), the first label is drawn and none of the others:

    Here's the XAML:
    <chart:RadCartesianChart x:Name="InstantaneousChart"<br>
                            <chart:DateTimeCategoricalAxis LabelFitMode="None" <br>
                            <chart:LinearAxis LabelFitMode="MultiLine"<br>
                            <chart:AreaSeries  Stroke="GreenYellow"<br>
                                               ItemsSource="{Binding InstantaneousData}"<br>
                            <chart:ChartPanAndZoomBehavior ZoomMode="None" PanMode="None"/><br>

    I've seen very little documentation specific to the Windows Phone 7 charts online, and even on this site I am constantly routed to WPF/Silverlight support forums where often the solution seems to be modifying the behavior of AutoRange or something akin to that. I have thus far found no property in the WP7 chart control where I can specify what this should be.

    Help would be greatly appreciated.
  2. Georgi
    Georgi avatar
    296 posts

    Posted 19 Dec 2011 Link to this post

    Hi Lauren,

    Thank you for contacting us and for your question.

    Each Chart axis has specific properties to control how its ticks and labels are positioned. For example a LinearAxis has MajorStep, Minimum, Maximum as well as RangeExtendDirection properties. A DateTimeCategoricalAxis (as in your case) has a MajorTickInterval property to specify the step at which ticks and labels are available. The DateTimeContinuousAxis has MajorStep and MajorStepUnit (Month vs. Day, etc) to fine-tune the ticks.

    As far as I see from the sample code you are using DateTimeCategoricalAxis without setting its DateTimeComponent property, which default value is DateTimeComponent.Day. This means that the data is grouped by the Day value of each DateTime structure passed. If you want the entire Date value to be used, you should set the DateTimeComponent to Date. To specify tick interval you may use the MajorTickInterval property. For example:

    private void UpdateTickInterval(CategoricalAxis axis)
        int dataPointCount = (this.radChart1.Series[0] as CategoricalSeries).DataPoints.Count;
        // round to 8 ticks
        int interval = dataPointCount / 8;
        axis.MajorTickInterval = Math.Max(1, interval);

    You can also update your data accordingly to prevent too many data points visualized - e.g. you may remove the last data entry upon adding a new one if a certain threshold is exceeded.

    I hope this information is useful. If you need further assistance I would kindly ask you to prepare a sample project and to open a new support ticket with the project attached so that I can have a closer look and propose a solution.

    I am looking forward to your reply.

    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Leonard
    Leonard avatar
    1 posts
    Member since:
    Nov 2010

    Posted 25 Dec 2011 Link to this post

    Yep ...I'm having the same issue. I tried to use the Rotate with a setting of zero angle to see if it could work since it works kindof with a 300 degree angle.

    I really like overall what the controls could do, just that I keep running into these little things that should work and they don't.

    Sorry I in the wrong Post : I thought this was Siliverlight, but the same problem occurs there too. 8(...And yes I'm working on Christmas before the kids get up!

    Merry Christmas -  i wish someone would send me a gift to make these horizontal axis behave so I can get on with my project.
  5. Ryan
    Ryan avatar
    21 posts
    Member since:
    Apr 2013

    Posted 11 Feb 2014 in reply to Leonard Link to this post

    For the DateTimeContinuousAxis, I used the MaximumTicks property to limit the number of ticks that would appear.
Back to Top