Dynamic Chart labels

4 posts, 0 answers
  1. Matt
    Matt avatar
    4 posts
    Member since:
    Oct 2016

    Posted 21 Dec 2017 Link to this post

    I am trying to migrate from HighCharts. One thing it does it auto select the proper amount of labels for the space. See attached. Is there a dynamic way to do something similar. I really like how it breaks date and then time. Where are using heavy one minute data and need to be able to dynamically create the labels.

    I see the skip and I see the steps but I really need to be able to have it dynamic.

  2. Stefan
    Admin
    Stefan avatar
    1790 posts

    Posted 26 Dec 2017 Link to this post

    Hello, Matt,

    Thank you for the screenshots.

    The Kendo UI Chart will dynamically set the labels when the baseUnit is set to fit:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.baseUnit

    Still in some cases setting a more specific baseUnit will create better results than the automatic fitting. In that scenarios we can recommend based on custom logic over the data to programmatically set the best baseUnit dynamically using the setOptions method of the Chart:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Matt
    Matt avatar
    4 posts
    Member since:
    Oct 2016

    Posted 28 Dec 2017 in reply to Stefan Link to this post

    When I use the Auto it would be super helpful to split the days. Right now it just shows different times. But its kinda hard to see where the days change. 
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2236 posts

    Posted 01 Jan Link to this post

    Hello Matt,

    You can use the majorGridLines to set a custom step for the categoryAxis. For example, if you the baseUnit is hours, you can set the step of the majorGridLines to "24", which will mark each day:
    categoryAxis: {
        baseUnit: "hours",
        majorGridLines: {
          width: 1,
          step: 24,
            color: "green"
         }
    },

    For different base unit you can set different step for the majorGridLines.


    Best Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top