Kendo UI Chart does not use the entire width of the div when the div containing the chart is hidden.

[Ujjwal Karjee]

I have a number of Kendo UI Chart inside different divs. The divs stay hidden when the charts are rendered. The chart takes default width of 600 px even though the div containing the chart is 800 px. However if I render the chart keeping the div visible the chart takes the whole 800 px. 

Any help?

[Iliana Dyankova]

Hello Ujjwal,

I am not sure if I understand your scenario correctly. May I ask you to provide some more details? Code snippets demonstrating your current implementation or a jsFiddle / jsBin link will be highly appreciated. This way I would be able to advice you further and provide the most appropriated solution. Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
the Telerik team

[Ujjwal Karjee]

Iliana,

Look at example 1) and 2). Both have same bar chart inside the same div. The width of the outer div is '900px'. The bar chart is loaded similarly. The only difference is on the second example the user needs to click display button to see the bar chart. Look at the size of the bar chart that gets rendered.

1) http://jsfiddle.net/t3Wmt/
2) http://jsfiddle.net/sgsrg/

Why is the bar chart takes the width of '600px' when the outside container is hidden? Is it by design? If so how can we resolve the issue?

Regards,

[Iliana Dyankova]

Hi Ujjwal,

Thank you for the examples. The reason for the observed behavior in the first jsFiddle is due to the fact that initially the chart takes it's parent div's width (the <div> is a block element and it takes up the full width available). In the second fiddle when you click the button and show the chart it is already rendered and takes the default chart's width. In order to resolve the issue and make the chart to take it's parent div's width I can suggest to refresh() the chart. For example: 

$('#btndisplay').click(function(){
   $('#container').show();
   var chart = $("#chart").data("kendoChart")
   chart.refresh()
});

For convenience I updated your jsFiddle.

Regards,
Iliana Nikolova
the Telerik team

[Mohammad]

I have implemented the above solution for accomodating chart width rendered inside tabstrip. When i upgraded to 2013.1.514, it now renders all chart with 600px width on refresh (tab selection). 

Kindly confirm that the chart.refresh() is working fine in this release. If not, kindly let me know the alternative to it. If not, kindly let me know the max release i can downgrade to.

Regards

[Iliana Dyankova]

Hello Mohammad,

I have already replied to the same questions in your support ticket, however I am pasting my reply here too:

The same approach when Kendo UI Chart is in TabStrip should work as expected. For your convenience I prepared a simple jsBin example which demonstrates the aforementioned statement in action - could you please edit it and show me your current implementation? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your time.

Regards,
Iliana Nikolova
Telerik

[Jacques]

Iliana, your code makes use of the refresh() method which according to Telerik documentation refreshes the UI as well as the datasource. In a real world application this would mean unnecessary trips to the server negatively affecting performance correct? 

[Iliana Dyankova]

Hi Jacques, 

You are right - the refresh methods reloads the data, however in order to avoid this you should use the chart redraw method.

Regards,
Iliana Nikolova
Telerik

[Joe]

Neither work for me.

[Iliana Dyankova]

Hi Joe,

Could you please elaborate a bit more on the issue you encountered? Have you tested the chart redraw / refresh / resize methods? 

Regards,
Iliana Nikolova
Telerik

 

 

[James]

I am having the same problem as described above.  If the chart is initially hidden using ng-show/ng-hide, then when the chart is displayed it is a fraction of the correct size.  I have tried

var chartDataEl = $($('.chartArea')[scope.chartIndex]).find('.graph').data('kendoChart');
chartDataEl.refresh();
chartDataEl.resize();
chartDataEl.redraw();

None work for me.

[T. Tsonev]

Hi,

Please accept my apologies for the delayed response.

What is the width of the element at that point in time, e.g.?
    var el = $($('.chartArea')[scope.chartIndex]).find('.graph');
    console.log(el.width());

Can you also try resetting the remembered size as follows:
    chartDataEl.resize(true);

I hope this helps.

Regards,
T. Tsonev
Telerik