StockChart: How to control aggregation when baseUnit is set to auto?

2 posts, 1 answers
  1. Robert
    Robert avatar
    23 posts
    Member since:
    Jun 2012

    Posted 24 May 2013 Link to this post

    Hello forum,

    I'm using the StockChart for "non-stock" date-based data because I like the functionality and look&feel of the navigator. Now I ran into an issue with the granularity of the displayed data and I can't find the right place to customize the behaviour (please have a look at the attached images):

    When I want to show, lets say, a temperature chart for a given time period of 1 week (which is shown as a whole in the navigator as an area chart), and the current selection covers an interval of 3 days, the automatic aggregation in he upper chart displays about 26 values. When I then enlarge the selection to 3.5 or 4 days, the upper chart jumps to a much coarser display.

    Is there a way to control this behaviour? I would like to achive something like this: when the unit in the upper chart jumps to days (like in the second image), I would like to...

    1.  have the labels on the x-axis show the date rather than "00:00"
    2. display more datapoints to get a smoother curve (e.g. about 25 like in the smaller units)

    How can I do this? And where can I set the "threshold", the maximum number of datapoints shown in a given unit?

    Thanks for your help!

  2. Answer
    T. Tsonev
    T. Tsonev avatar
    2831 posts

    Posted 27 May 2013 Link to this post


    Thank you for the detailed explanation of the problem.

    The granularity of the date axis is controlled by two properties in the stock chart:

    • maxDateGroups - limits the total number of categories. Defaults approx. to widget width (px) / 30
    • autoBaseUnitSteps - allowed intervals when choosing a time unit so it fits the maxDateGroups limit.

    In your scenario it tries to fit X 3-hour intervals and fails. It then moves to the next larger base unit (days) which results in way too little points.
    We can add one more step to the hour intervals to remedy this:

        // ...
        categoryAxis: {
             autoBaseUnitSteps: {
                 hours: [1, 2, 3, 6]

    I acknowledge that property naming is not very intuitive, but we're working on expanding the documentation on this topic.

    Tsvetomir Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top