Stacked Column Chart - Bars Exceed Max Axis

11 posts, 1 answers
  1. Greg
    Greg avatar
    11 posts
    Member since:
    Mar 2012

    Posted 18 Apr 2012 Link to this post

    Hey All,

    I have been working with the column charts, and finally figured out how to stack the bars in the chart with the help of this article.
    http://www.kendoui.com/forums/dataviz/chart/stack-multiple-series.aspx 

    There's a problem though. The largest value bars are going 'over the top' of the chart (they are exceeding the max y-axis value).
    The funny thing is that it seems like the value has to be an ODD number to get it to go over the top axis.

    Below is all the code to replicate. Attached is a screenshot of what I am seeing.

    Is this a bug? Am I doing something wrong?

    This happens with both default and black Kendo Skins.
    Tested on Chrome 18.0.1025.162, Firefox 8.0.1, and IE9.
    I am using Kendo UI Complete v2012.1.322

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/file/Kendo/kendo.common.min.css"/>
        <link rel="stylesheet" href="/file/Kendo/kendo.black.min.css"/>
    </head>
    <body>
    <script type="text/javascript" src="/file/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/file/Kendo/kendo.all.min.js"></script>
    <script type="text/javascript">
        var data = [{"Period":"1-3","Comp1":1,"Comp2":2,"Comp3":4,"Comp4":0},{"Period":"3-5","Comp1":2,"Comp2":5,"Comp3":0,"Comp4":2},{"Period":"5-7","Comp1":3,"Comp2":1,"Comp3":4,"Comp4":2},{"Period":"7-9","Comp1":2,"Comp2":3,"Comp3":5,"Comp4":1},{"Period":"9+","Comp1":3,"Comp2":1,"Comp3":2,"Comp4":2}];

        function createCharts () {
            $("#chartIVPayers").kendoChart({
                theme: $(document).data("kendoSkin") || "black",
                title: {
                    text: "Comps"
                },
                dataSource:  data,
                series: [{
                    type: "column",
                    field: "Comp1",
                    name: "Comp1",
                    stack: "Comp2,Comp3,Comp4"             
                },{
                    type: "column",
                    field: "Comp2",
                    name: "Comp2"
                },{
                    type: "column",
                    field: "Comp3",
                    name: "Comp3"            
                },{
                    type: "column",
                    field: "Comp4",
                    name: "Comp4"            
                }],
                categoryAxis: {
                    field: "Period"
                }
            });
        }
        
        setTimeout(function() {
                createCharts(); 
            }, 
        400);

    </script>
        <div id="chartIVPayers"></div>
    </body>
    </html>
  2. Guru
    Guru avatar
    1 posts
    Member since:
    May 2012

    Posted 11 May 2012 Link to this post

    Hi,

    I am facing the same issue. Please let me know if you resolved this.

    Guru
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 May 2012 Link to this post

    Hi guys,

    I examined the code that @Greg has provided and it seems the definition of the stack is not correct. Please check this online demo, which illustrate the right approach - each of the series should indicate its stack.
    Also, for more detailed information about the configuration of Kendo UI Chart, you could take a look at our online documentation.

     

    Greetings,
    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!
  4. Greg
    Greg avatar
    11 posts
    Member since:
    Mar 2012

    Posted 15 May 2012 Link to this post

    Hi Iliana,

    What exactly is it that was wrong with the chart definition? The example you pointed me to has the data hardcoded, and I need to drive the data from a DataSource or a JSON string. Can you provide some insight into how to correctly format the chart and/or data so that the chart will render correctly??

    Does the JSON have to have a "data" sub-object? If that is the cause of this, its going to take a lot of work to format the data properly on the back end. Just seems a bit strange that you would be forced to set it up that way. All of the other charts seems to support a simple JSON data object.

    Thanks
    Greg
  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 17 May 2012 Link to this post

    Hi Greg,

    By design, there are two approaches that could be applied in order to stack the bars in your Kendo UI Chart: 
    • Set stack: true property to the SeriesDefaults:
      $("#chart").kendoChart({
        seriesDefaults: {
          type: "column",
          stack: true
        },
        ...
      });
    For convenience I created a jsFiddle example, which illustrates such approach in action. Also, I updated the code snippet you provided - see the attachments.
    • Stack with group name for each of the series - this approach is illustrated in the online demo I suggested in my previous post.

    Regarding your JSON-related question - the stack of the bars does not depend on the type of data binding you use - both local and remote are supported. Please take a closer look at the example I provided - it illustrates stacked bar chart bound to remote data. 

    I hope this information helps.

    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. Greg
    Greg avatar
    11 posts
    Member since:
    Mar 2012

    Posted 17 May 2012 Link to this post

    Fantastic!! Thank you for doing that. 

    As you say, the key is this line of code:
    seriesDefaults: {stack: true},

    I know you guys are focusing on documentation this quarter, and if possible it would be great to include that in an example.
    This one (which I was using as an example) didn't have that in there.
    http://demos.kendoui.com/dataviz/bar-charts/grouped-stacked-bar.html 

    Thanks again for the help and the great product!
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 May 2012 Link to this post

    Hello Greg,

    It is good to know that everything is working fine now. Indeed, this configuration of the Kendo UI Chart is available in our online documentation. Please check here.

    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!
  8. Mark Condon
    Mark Condon avatar
    1 posts
    Member since:
    Dec 2005

    Posted 29 May 2012 Link to this post

    Hi, I've had the same issue for a while now.

    Using the above jsFiddle but making a minor modification (valueAxis.max = 70000, either at creation or setting and then refreshing) results in the bars rendering well outside the plot area.  see: http://jsfiddle.net/R97De/

    This behavior is inconsistent between bars and lines, as both line and area will stick inside the plot area:  http://jsfiddle.net/YZpLx/

    Are there any plans on changing this? It makes client-side zooming functionality quite messy when using bars.

    Regards.

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 31 May 2012 Link to this post

    Hello Mark,

    Thank you for the feedback. Indeed, this is a known issue and our developer team is working on fixing it, but I can not commit to an exact time frame - we will do our best to fix it as soon as possible of course.   

    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!
  10. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 06 Jun 2013 Link to this post

    how can i define limit for each grouped stack bar ?  for example Stack Bar A limit 100 but it is 125 in my json data. 125-100=25  can i make red color  after the 100 in my stack bar ? 
    i am asking for each group stack bar. limits can be change. 
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jun 2013 Link to this post

    Hello Osman,

    I am afraid your scenario is currently not supported in Kendo UI Chart and there is no suitable workaround I can suggest. If you wish you can submit this idea as a feature request at our UserVoice portal - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation.
     
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top