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

Solution 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

Solution 2

Its kinda late to answer this but hope this helps someone out there... play around with barDatasetSpacing [ adds spacing after each bar ] and barValueSpacing [ adds spacing before each bar ] to be able to achieve your desired bar width.. example below when initiating your bar chart

... barDatasetSpacing:10, barValueSpacing:30, ...

Hope it helps..

Solution 3

I did it by extending Bar chart, and calculating barValueSpacing dynamically. I use angular chartjs

var MAX_BAR_WIDTH = 50;
Chart.types.Bar.extend({
            name: "BarAlt",
            draw: function(){
              var datasetSize = n // calculate ur dataset size here
              var barW = this.chart.width / datasetSize;
              if(barW > MAX_BAR_WIDTH){
                this.options.barValueSpacing = Math.floor((this.chart.width - (MAX_BAR_WIDTH * datasetSize)) / datasetSize);
              }
              Chart.types.Bar.prototype.draw.apply(this, arguments);
            }
        });