This is a migrated thread and some comments may be shown as answers.

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

5 Answers 584 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Aakash
Top achievements
Rank 1
Aakash asked on 08 Sep 2020, 05:39 AM

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/

5 Answers, 1 is accepted

Sort by
0
Aakash
Top achievements
Rank 1
answered on 08 Sep 2020, 05:45 AM
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.
0
Martin
Telerik team
answered on 09 Sep 2020, 11:45 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Aakash
Top achievements
Rank 1
answered on 09 Sep 2020, 12:38 PM

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. 

 

0
Neli
Telerik team
answered on 11 Sep 2020, 09:59 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Aakash
Top achievements
Rank 1
answered on 11 Sep 2020, 10:18 AM

Thank you Neli for your help.

 

That worked perfectly as need.

Tags
General Discussions
Asked by
Aakash
Top achievements
Rank 1
Answers by
Aakash
Top achievements
Rank 1
Martin
Telerik team
Neli
Telerik team
Share this question
or