CODEWITHSUNDEEP
javascriptjquerycsskendo-uibar-chart
chris
chris

Reputation: 4867

Kendo ui Bar Chart width/maxWidth of Bars

I got an Kendo ui Bar Chart which is filled with an dynamic array.
One time its filled with 12 items and one time its filled with only 1 item.
Now the Bars automatically resizes, when only one item is in the array, the Bar is super big.
I know, that there is no "max-width" or "width" property in the configuration.

Is there a workaround for my problem? I.E. dynamic calculation of the gap/space or whatever property? Or even with css or so?

Here is an simple fiddle

var dataset = [1,2,3,3,5,6,8];
var dataOnlyOne = [10]

//gap:0.2

// gap: function(){
    return width/12*...     // works not
}

Upvotes: 3

Views: 3585

Answers (1)

Steen
Steen

Reputation: 2887

Its been a while, and you probably moved on, but I was searching for something similar...

Your problem could be resolved using the below code, where the gap is calculated from the number of items in the data array:

$(function() {
    var data = [1,2,3,3,5,6,8,2,3,3,5,6,8];
  //  var data = [10];
    var gap = 8/data.length
    $('#chart').kendoChart({
        seriesDefaults: {
            type: 'column',
            stack: true,
        },
        series: [
            {
                name: 'dataset',
                data: data,    // dataOnlyOne
                color: 'blue', 

                gap:gap
            }
        ]
    })
});

Upvotes: 2

Related Questions