[Chartjs]-Chart.js setting maximum bar size of bar chart

by

6👍

✅

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

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

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

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

}

Leave a comment