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

Setting width of ChartArea to 100% doesn't work

9 Answers 1417 Views
Chart
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 06 Feb 2013, 03:24 PM
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?  

9 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 08 Feb 2013, 03:00 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 11 Feb 2013, 01:24 PM
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?
0
Iliana Nikolova
Telerik team
answered on 13 Feb 2013, 01:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vyn
Top achievements
Rank 1
answered on 07 Apr 2014, 01:18 PM
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.
0
Iliana Nikolova
Telerik team
answered on 09 Apr 2014, 08:11 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Casey
Top achievements
Rank 1
answered on 08 May 2014, 08:36 PM
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.
0
T. Tsonev
Telerik team
answered on 09 May 2014, 10:58 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Casey
Top achievements
Rank 1
answered on 09 May 2014, 12:45 PM
Thanks Tsonev.

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

.HtmlAttributes(new { style = "margin:0 auto; width: 100%; height:100%; " })
0
Vyn
Top achievements
Rank 1
answered on 09 May 2014, 12:49 PM
Ah, good call. Thanks for the update!
Tags
Chart
Asked by
James
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
James
Top achievements
Rank 1
Vyn
Top achievements
Rank 1
Casey
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or