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.
5 Answers, 1 is accepted
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
Rank 1
$(window).on("resize", function() { kendo.resize($(".chart-wrapper"));});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
Rank 1
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?
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