Chart.js setting maximum bar size of bar chart

Question

I want to limit the maximum width of a bar chart

My CODE:

    <script>
        // bar chart data
        var a=[];
            a.push('kalai 2015-04-11');
        var b=[];
            b.push('300');
        var barData = {
            labels : a,

            datasets : [
                {
                    fillColor : "#48A497",
                    strokeColor : "#48A4D1",
                    data : b

                }
            ]
        }
        // get bar chart canvas
        var income = document.getElementById("income").getContext("2d");
        // draw bar chart
        new Chart(income).Bar(barData, {scaleGridLineWidth : 1});
        <!--new Chart(income).Bar(barData);-->
    </script>   

What is the way to do so

It looks like this for single value

The size of the bar reduces as the number of bar increases How can i set maximum bar size to make it more viewable

Answer 1

You can add new options, which are not available by default.But you need to edit chart.js

In Chart.js add these lines of code Step 1:

//Boolean - Whether barwidth should be fixed
        isFixedWidth:false,
        //Number - Pixel width of the bar
        barWidth:20,

Add these two line in defaultConfig of Bar Chart

Step 2:

calculateBarWidth : function(datasetCount){

                    **if(options.isFixedWidth){
                        return options.barWidth;
                    }else{**
                        //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
                        var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
                            return (baseWidth / datasetCount);
                    }

Add this condition in calculateBarWidth function of barchart

Now you can set barWidth in custom js file as option by setting

isFixedWidth:true,
barWidth:xx

If you don't want to specify fixed barwidth, just change isFixedWidth:false