Setting width of ChartArea to 100% doesn't work

[James]

I'm trying to set up a pie chart.  When I set the width of the ChartArea to a pixel based value it's fine but when I set it to a percentage value it doesn't work.

            @(Html.Kendo().Chart()
                  .ChartArea(c => c.Background("#DAECF4"))
                  .HtmlAttributes(new { style = "margin:0 auto;border:none; width: 100%;" })
                  .Name("chart").......(rest of code omitted)

When I look at the HTML in Firebug I see that it has created a div called chart with a width of 100% but the child svg element has a width of 100px - which means it doesn't display correctly.  Whatever I change the percentage width to, I get the svg element width of that amount in pixels instead of percent e.g. 90% ->90px.

Anyone got any ideas?  Does this control support percentage widths?  

[Iliana Dyankova]

Hi James,

By design Kendo UI Chart for ASP.NET MVC takes its parent div's width. If it has not fixed width the <div> takes up the full width available (as it is a block element). Hence you are able to set width of the chart in percentage, but you should set width in pixels of its parent. For example: 

<style>
.chart-wrapper {
    width: 466px;
}
</style>

<div class="chart-wrapper">
  @(Html.Kendo().Chart()
     //....
    .HtmlAttributes(new { style = "margin:0 auto;border:none; width: 100%;" })
)
</div>

I hope this information helps.
 
Kind regards,
Iliana Nikolova
the Telerik team

[James]

Thanks for the reply.

It still doesn't work - when I do this:

<div style="width:400px;">
            @(Html.Kendo().Chart(Model.Data.PieCharts)
                  .ChartArea(c => c.Background("#DAECF4"))
                  .HtmlAttributes(new { style = "margin:0 auto;border:solid 1px #DAECF4; width: 100%;" })
                  <!--code omitted-->
                
                  )
</div>
This still renders as 100px width.

When I inspect the rendered html in Firebug I see:

<div style="width:400px">
<div id="chart79107955-25c4-4dc5-8154-9eb8e222c113" class="k-widget k-chart" style="margin: 0px auto; border: 1px solid rgb(218, 236, 244); width: 100%; position: relative;" data-role="chart">
<svg style="position: relative; display: block;" height="400px" width="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

This must be some sort of bug?

[Iliana Dyankova]

Hello James,

I tried to reproduce the problem but to no avail - the svg element gets its parent's width and height. For your convenience I attached my test project, could you please check it and let me know if I am missing something? Thank you in advance for your time.
 
Regards,
Iliana Nikolova
the Telerik team

[Vyn]

I'm having the exact same issue, and adding an inline css style of "width:100%" even with "!important" doesn't take care of it, since CSS can't override the "width" attribute of the tag. The odd thing is, the page loads the chart at 100px wide until I click on one of the legends, and THEN it inherits the parent element's width.

[Iliana Dyankova]

Hi Vyn,

The provided images are not enough in order to determine the exact reason for the issue. Is it possible to provide an isolated runnable example which demonstrates your current implementation and which I can test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your time and cooperation.

Regards,
Iliana Nikolova
Telerik

 

 

[Steven]

This problem is still not resolved as of version 2014.1.415. I am having the exact same problem. My chart is not inheriting the width nor the height of its parent div.

[T. Tsonev]

Hi,

It's likely that the container final size has not settled by the time the chart is created. For example, if the container is within another widget or a table.

This can be resolved by calling the widget resize method whenever the container size is changed.
The kendo.resize method does the same for a group of widgets. See Using Kendo with In Responsive Web Pages

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Steven]

Thanks Tsonev.

What finally fixed this for me was adding this to the chart:

.HtmlAttributes(new { style = "margin:0 auto; width: 100%; height:100%; " })

[Vyn]

Ah, good call. Thanks for the update!