maxDateGroups based on the width of the chart

4 posts, 0 answers
  1. Xavier
    Xavier avatar
    29 posts
    Member since:
    Jun 2014

    Posted 20 May 2015 Link to this post

    I would like to set the maxDateGroups based on the width of the chart. Some people have big monitors and some have small, so I would like to adjust the number of points shown based on the screen (chart) size.  Is there a way to calculate the number to set on maxDateGroups such that the dates don't start overlapping or look too crowded on the x axis?

     

    Thanks

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 May 2015 Link to this post

    Hi Xavier,

    This scenario is not supported out-of-the-box by Kendo UI Chart. What I would suggest as a workaround is to dynamically set maxDateGroups depending on the screen size: 

    // get reference to the chart widget
    var chart = $("#chart").data("kendoChart");
    // dynamically set categoryAxis.maxDateGroups
    chart.setOptions({categoryAxis: {maxDateGroups: 5}});

     

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Xavier
    Xavier avatar
    29 posts
    Member since:
    Jun 2014

    Posted 22 May 2015 in reply to Iliana Nikolova Link to this post

    Yes, but how to get the width of the date label?

    If inspected on Chrome, it shows.

    <g>

    <text style="font:12px Arial,Helvetica,sans-serif;" x="372.6115" y="408" stroke="none" fill="#232323" fill-opacity="1">2/27</text>

    </g>

     

  4. Xavier
    Xavier avatar
    29 posts
    Member since:
    Jun 2014

    Posted 22 May 2015 in reply to Iliana Nikolova Link to this post

    Thanks, the challenge is finding out the label size. For now I am just using a fixed size of 50 for the label width and created a sample that does what I am looking for.

    http://dojo.telerik.com/okeWO

     

Back to Top