[Chartjs]-How to change Chart.js horizontal bar chart Width?

by

2👍

✅

Just override the buildScale method to mess around with the scale object once its created.

Preview

enter image description here

Script

Chart.types.HorizontalBar.extend({
  name: "HorizontalBarAlt",
  initialize:  function(data){
    var originalBuildScale = this.buildScale;
    var chart = this;
    chart.buildScale = function() {
          var r = originalBuildScale.apply(this, arguments);
          chart.scale.calculateBarHeight = function() {
             return 10;
          }
          return r;
    }
    Chart.types.HorizontalBar.prototype.initialize .apply(this, arguments);
  }
});

Fiddle – http://jsfiddle.net/2mtgsoy3/

1👍

You can set it inside options object.

var options = 
{
    scales: 
    {
        yAxes: [
            {
                barPercentage: 0.3
            }]
    }
}

Leave a comment