Setting width of ChartArea to 100% doesn't work

10 posts, 0 answers
  1. James
    James avatar
    8 posts
    Member since:
    Jan 2013

    Posted 06 Feb 2013 Link to this post

    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?  
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Feb 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. James
    James avatar
    8 posts
    Member since:
    Jan 2013

    Posted 11 Feb 2013 Link to this post

    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?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 13 Feb 2013 Link to this post

    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!
  6. Vyn
    Vyn avatar
    2 posts
    Member since:
    Feb 2014

    Posted 07 Apr 2014 Link to this post

    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.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Apr 2014 Link to this post

    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.

     
  8. Casey
    Casey avatar
    3 posts
    Member since:
    Jul 2012

    Posted 08 May 2014 Link to this post

    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.
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 09 May 2014 Link to this post

    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.

     
  10. Casey
    Casey avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 May 2014 in reply to T. Tsonev Link to this post

    Thanks Tsonev.

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

    .HtmlAttributes(new { style = "margin:0 auto; width: 100%; height:100%; " })
  11. Vyn
    Vyn avatar
    2 posts
    Member since:
    Feb 2014

    Posted 09 May 2014 in reply to Casey Link to this post

    Ah, good call. Thanks for the update!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready