set bar width- kendo bar chart using gap and spacing? -

set bar width- kendo bar chart using gap and spacing? -

i need help set width of bars in kendo bar charts when number of bars reduces. here jsfiddle link working on: http://jsfiddle.net/an59e/44/

in example, there 2 kendo bar charts, 1 has 6 bars , other has 12 bars. in sec graph bars width fine. when remove 2 bars need same width of bars, instead default behavior of kendo resize bars. setting spacing , gap values, bars should resize. in example, have set spacing , gaps value in series defaults attribute doesn't working. question , how alter width of bars?

hmtl code:

<div id="chart1"> </div> <div id="chart2"> </div>

js code:

var series1= [70, 60, 40]; var series2= [-50, 40, 20]; var series3= [60, 60, -90, 60, 10, 50]; var series4= [60, 20, 20, 50, 40, 10]; $("#chart1").kendochart({ seriesdefaults: { type: "column", stack: true, width:2, gap: 50, }, series: [ { data: series1, color: "#00cc00", negativecolor: "#cc0000", spacing: 0 }, { data: series2, color: "#cccccc" } ], plotarea: { border: { color: "#cccccc", width: 1 } }, chartarea: { border: { color: "#cccccc", width: 1 }, height: 300 }, categoryaxis: { pane: "top-pane", color: "#0099ff", majorgridlines: { visible: true, }, line: { width: 3, }, plotbands: [ {from: 0, to:1, color: "#cccccc"}, ], }, seriesdefaults: { type: "column", labels: { visible: true, color: "green" }, }, valueaxis: { title: { text: "a" }, majorgridlines: { visible: false }, labels: { visible: false, }, line: { visible: false } }, tooltip: { visible: true, /*format: "{0}"*/ template: "institutional results:#=value#<br/>institutional target:#=value#<br/>" } }); $("#chart2").kendochart({ series: [ { data: series3, color: "#00cc00", negativecolor: "#cc0000", spacing: 0 }, { data: series4, color: "#cccccc" } ], plotarea: { border: { color: "#cccccc", width: 1 } }, chartarea: { border: { color: "#cccccc", width: 1 }, height: 300, }, categoryaxis: { pane: "top-pane", color: "#0099ff", majorgridlines: { visible: true, }, line: { width: 3, }, plotbands: [ {from: 0, to:1, color: "#333333"}, ], /*categories: [2005, 2006, 2007, 2008, 2009, 2010], labels: { margin: { top: 100, } },*/ }, seriesdefaults: { type: "column", labels: { visible: true, color: "green" }, }, valueaxis: { title: { text: "o" }, majorgridlines: { visible: false }, labels: { visible: false, }, line: { visible: false } }, tooltip: { visible: true, /*format: "{0}"*/ template: "institutional results:#=value#<br/>institutional target:#=value#<br/>" } });

thanks.

just replace below code snippet in javascript , done!

seriesdefaults: { type: "column", labels: { visible: true, color: "green" }, gap: 5, },

in above code have added gap value define gap of bars leads create them lean want.

please refer below js fiddle.

http://jsfiddle.net/an59e/134/

please allow me know if face difficulty implement same.

kendo-ui kendo-dataviz