Kendo chart not covering the full width of the card and not working on resize

[Aakash]

I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).
But some reason that that doesn't cover the entire width of the cards and render being so small.
There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand. But when I changed some data then it occupies the full width.

Why it is not rendering properly initially? What's the issue causing this and what is the workaround for this?

 

http://jsfiddle.net/pdLncxoy/

[Aakash]

In actual this is the problem, when i changes some code and if the page is refreshed it load properly. But after i hit f5 or refresh the page the width still remain the same.

[Martin]

Hello Aakash,

Thank you for the provided example.

Unfortunately I was not able to run it due to some errors, so I copied the relevant code in this Stackblitz example. Could you please modify it to reproduce the issue, or if I am missing something to observe it? I will be happy to assist you once I am more familiar with the scenario.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Aakash]

Hello Martin,

Thank you for replying my question. 

I have created a new project that completely demonstrates my problem:

You can check the provided sample implemented in the stackblitz

Here, when the second tab that is  <b-tab title="Olypic Medals won by USA">  doesn't occupy the full width of the bootstrap cards that is inside the tabs.

Also i have attached the screenshot of the issue. 

 

[Neli]

Hello Aakash,

I would suggest you use the Chart refresh() or resize() methods in order to adjust the chart to match its container. You could do that  when page loads or when for example, the tab containing the Chart is clicked. 

 var stock = this.$refs.stock.kendoWidget();
 stock.resize() 

I modified the sample Stackblitz example and you will find link to it here. Currently, the resize() method is used when the window resizes. 

Also, the following links to our Forum could be helpful.

- https://www.telerik.com/forums/chart-resizing

- https://www.telerik.com/forums/auto-resize-charts-on-responsive-web-design-

I hope the provided information will help you to resolve the issue.

Regards,
Neli
Progress Telerik

[Aakash]

Thank you Neli for your help.

 

That worked perfectly as need.