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

Question

I need some help to set the width of the bars in kendo bar charts when the number of bars reduces. Here is the jsFiddle link i am working on: http://jsfiddle.net/An59E/44/

In this example, there are 2 kendo bar charts, 1 has 6 bars and the other has 12 bars. In the second graph the bars width is fine. Now when i remove 2 bars i need the same width of bars, instead the default behavior of the kendo is to resize bars. by setting the spacing and the gap values, the bars should resize. In this example, i have set the spacing and gaps value in series defaults attribute but it doesn't look like its working. Now the question is , how to change the width of the 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.

score 2 · Answer 1 · answered Oct 28 '14 at 05:47

just replace below code snippet in javascript and you are done!

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

In above code I have added gap value to define gap of bars which leads to make them thin which you want.

Please refer to below js fiddle.

http://jsfiddle.net/An59E/134/

Please let me know if you face any difficulty to implement the same.

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

1 Answers1