Accepted answer

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
        //Number - Pixel width of the bar

Add these two line in defaultConfig of Bar Chart

Step 2:

calculateBarWidth : function(datasetCount){

                        return options.barWidth;
                        //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


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


Did you tried following options?

    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero : true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1,

    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,

    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,

    //Boolean - If there is a stroke on each bar
    barShowStroke : true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth : 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing : 5,

    //Number - Spacing between data sets within X values
    barDatasetSpacing : 1,

    //String - A legend template
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"



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

var MAX_BAR_WIDTH = 50;
            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);


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..

Related Query

More Query from same tag