Chart width doesn't fill container

6 posts, 0 answers
  1. Sam
    Sam avatar
    8 posts
    Member since:
    Sep 2015

    Posted 03 Feb Link to this post

    I am using Angularjs in combination with bootstrap. The chart displays after the data has been retrieved using the ng-show="hasData()" option. I want the chart to fill the width of the parent element.

    When the chart displays: the "g" element is only 400px wide while the "svg" has 100% width. In the controller constructor I resize the containing element when the window is resized, however, this doesn't happen until the window is resized.

    I attached two pictures showing what I'm talking about.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Feb Link to this post

    Hi Sam,

    Apologies for the delayed reply.

    In order to achieve the expected result you should call kendo.resize. For more details check the corresponding documentation.

    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. Kendo UI is VS 2017 Ready
  4. Sam
    Sam avatar
    8 posts
    Member since:
    Sep 2015

    Posted 08 Feb in reply to Iliana Nikolova Link to this post

    I call kendo.resize on the parent container just as below. The problem is that the window.resize event does not occur on initial load.
    $(window).on("resize", function() {
      kendo.resize($(".chart-wrapper"));
    });
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 11 Feb Link to this post

    Hi Sam,

    You could try resizing the chart in the widget created event. If this suggestion does not help, please provide a dojo example which demonstrates your exact setup - this way I would be able to provide concrete recommendations and advice you further. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Sam
    Sam avatar
    8 posts
    Member since:
    Sep 2015

    Posted 20 Feb in reply to Iliana Nikolova Link to this post

    This person has the same problem here: http://stackoverflow.com/questions/26463613/kendo-ui-chart-not-using-whole-available-space-when-shown-if-created-hidden

    An example of the problem here: http://codepen.io/albireo/pen/AeHui/?editors=101

    An example of their 'hack' solution here: http://codepen.io/anon/pen/pJewrE

    Using the 'hack' solution posted above my chart loads to full width. However, there is a flicker from it resizing, which doesn't look great. Now that you can better understand the problem, is there a solution that I can add which will work better than the one above?

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 24 Feb Link to this post

    Hi Sam,

    Both examples use an outdated version of Kendo UI (2014.2.1008) - upgrading to Q1 2016 (v2016.1.112) and using the resize method seems to fix the problem (dojo).

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready