Increase Bar Width in a Stacked Bar Chart

3 posts, 0 answers
  1. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 17 Jun 2013 Link to this post

    Hello,

    I'm working on implementing a stacked bar chart solution with one vertical column, but would like to increase the width of this vertical bar to fill the entire chart container it resides in (see screenshot).  Is there a way to increase just the width of this bar?

    This is my JS:

    function createChart() {
                        $("#chart").kendoChart({
    chartArea: {
    background:"#f3f3f3",
    margin:0,
    padding:0
    },

                          legend: {
                                visible: false,

    },
                            seriesDefaults: {
                                type: "column",
    stack: true,
    width:90
    },

    series: [{
    name: "Interest",
                                stack: "Mortgage",
                                data: [494.50],
    color: "#f58025",
    width:90
                            }, {
                                name: "Taxes",
                                stack: "Mortgage",
                                data: [375],
    color: "#f58025"
                            }, {
                                name: "Principle",
                                stack: "Mortgage",
                                data: [269],
    color: "#f58025"
                            }, {
                                name: "PMI",
                                stack: "Mortgage",
                                data: [200],
    color: "#f58025"
                            }, {
                                name: "Rollover",
                                stack: "Mortgage",
                                data: [75],
    color: "#f58025"
                          
                             }, {
                                name: "Insurance",
                                stack: "Mortgage",
                                data: [50],
    color: "#f58025"
    }],
                            valueAxis: {
    color:"#ff0000",
    max:1450,

    labels:{
    color:"",
    visible:false
    },
    line: {
                                    visible: false
                                },
    majorGridLines: {
                                    visible: false
                                },

                            },
                            categoryAxis: {
    color:"",
    justified:true,
    categories: ["Ex"],
    width:2,
                                

    majorGridLines: {
                                    visible: false
                                },
    crosshair: {
     width: 2,
     visible: true
    },
    },
                            tooltip: {
                                visible: true,
                                template: "#= series.name #: #= ['$']+value #"
                            }
                        });
                    }



    Thank you!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 18 Jun 2013 Link to this post

    Hello Randy,

    The bars' width depends on gap / spacing options (as shown in this online demo). Hence in order to achieve the desired result you could set gap: 0 to the seriesDefaults configuration. As an example:

    $("#chart").kendoChart({
      //....
       seriesDefaults: {
          type: "column",
          stack: true,
          width:90,
          gap: 0   
       }
    });
      Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 18 Jun 2013 Link to this post

    That worked.  Thanks!
Back to Top