How to set chart width to a percentage of screen size?

[Dave]

I have a PanelBar control with 3 panels, each holding a Chart control with column items.  I am using the HtmlHelper build the charts.  The PanelBar is in a container that spans 100% of the screen.  By default, the charts in the panels render at about 25% of the width - and that means charts with a lot of categories are seriously compressed and unreadable.

I've tried using the Width option of ChartArea (inside Chart), and while that works, I can't always be sure the double I set this to will be right for all user's browsers.  There is no string option, so Width has to be a number of pixels.

Using HtmlAttributes (adding style) also has no effect.

How can I get the charts to occupy 100% of the container other than just guessing using ChartArea's Width or resorting to JavaScript to redraw the chart after the page is rendered?

[Dave]

So I decided to move this out of a PanelBar control and into a standard Bootstrap set of tabs.  Now I get 100% across the page but a new problem.

On initial page load, the first tab shows a results table (which should be there) and the first chart (which should not).  The second tab has the first and second charts (should only have the first).  The third tab has the second and third charts (only the second should be here) and finally the fourth has the fourth chart (which is correct).

After I've clicked all 4 tabs, I can go back to the first tab and now all tabs show the correct contents without reloading, etc.

[Stoyan]

Hello David,

To set the size of the Chart by select and style its Html element identified by its Name configuration property. Then apply the resize method to match the size of its element:

<script>
    $(document).ready(function(){
        $("#chart").css("width", "100%").data("kendoChart").resize();
    })
</script>

This Telerik REPL showcases the behavior.

In regard to the Bootstrap integration with  Telerik Chart - there is a known incompatibility between some dynamic Components that manipulate the same html elements as Bootstrap's element. I suspect the reported issue might be caused by this incompatibility.

Could you please try putting the Charts in our Tabstrip Component's tab and let me know whether the issue persists?

Regards,
Stoyan
Progress Telerik

[Dave]

Thanks, Stoyan.  I found another fix for the last issue I had - it involved adding some CSS:

.tab-content > .tab-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}

That did the trick!