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?
5 Answers, 1 is accepted
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.
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.
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.
I hope the provided information will help you to resolve the issue.
Thank you Neli for your help.
That worked perfectly as need.