Increase Bar Width in a Stacked Bar Chart

[Randy]

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!

[Iliana Dyankova]

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

[Lee]

This link no longer works. 

[Nikolay]

Hi Lee,

Here is the link to the demo: https://demos.telerik.com/kendo-ui/bar-charts/gap-spacing

Regards,

Nikolay

[Randy]

That worked.  Thanks!