score:6

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

score:0

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

}

score:1

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);
            }
        });

score:3

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