Chart.js : bar spacing in horizontal bar chart

Question

horizontal bar chart

  var barOptions_stacked1 = { tooltips: { enabled: true }, hover: { animationDuration: 0 }, scales: { xAxes: [{ ticks: { beginAtZero: true, fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, scaleLabel: { display: false }, gridLines: { }, stacked: true }], yAxes: [{ barThickness: 20, gridLines: { display: false, color: "#fff", zeroLineColor: "#fff", zeroLineWidth: 0 }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, stacked: true }] }, legend: { display: true }, pointLabelFontFamily: "Quadon Extra Bold", scaleFontFamily: "Quadon Extra Bold" }; var ctx1 = document.getElementById("Chart1"); var myChart1 = new Chart(ctx1, { type: 'horizontalBar', data: { labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"], datasets: [{ data: [727, 589, 537, 543, 574], backgroundColor: "rgba(63,103,126,1)", hoverBackgroundColor: "rgba(50,90,100,1)", label: "newly request" }, { data: [238, 553, 746, 884, 903], backgroundColor: "rgba(163,103,126,1)", hoverBackgroundColor: "rgba(140,85,100,1)", label: "in progress" }, { data: [1238, 553, 746, 884, 903], backgroundColor: "rgba(63,203,226,1)", hoverBackgroundColor: "rgba(46,185,235,1)", label: "active" }, { data: [1338, 553, 746, 884, 903], backgroundColor: "rgba(255,169,188,1)", hoverBackgroundColor: "rgba(255,99,132,1)", label: "in approval" }, { data: [1438, 553, 746, 884, 903], backgroundColor: "rgba(136,202,247,1)", hoverBackgroundColor: "rgba(54,162,235,1)", label: "recycle" }, { data: [1538, 553, 746, 884, 903], backgroundColor: "rgba(196,232,116,1)", hoverBackgroundColor: "rgba(152,177,98,1)", label: "reject" }] }, options: barOptions_stacked1 }); 

 <canvas id="Chart1"></canvas> 

How to reduce spacing between bars. I tried categorySpacing, barValueSpacing... But nothing works! It looks fine in small width, but when full screen width, it height increases because of the spacing between bars. Inline css for canvas doesnt work as it is overrided by default chartjs. Also, I am not able to set height of chart while initializing chart : ctx1.canvas.height = 300; It doesnt work! jsfiddle link link

Answer 1

Bar spacing can be removed by setting both barPercentage and categoryPercentage to 1:

yAxes: [{
    barPercentage: 1.0,
    categoryPercentage: 1.0,
}],

However, barThickness seems to override these settings. The only solution I have found is to set the height of the parent element of the chart to a fixed value, set maintainAspectRatio option to false and remove the barThickness option.

NOTE: I'm using angular-chart.js

Answer 2

What worked for me was to force the height of the canvas:

document.getElementById("chart1").height = labels.length * 12 + 24;

The 12 is the height of the bar and the 12 is to accommodate the title and x-axis labels etc. You can remove the maintainAspectRatio: false, barPercentage, categoryPercentage etc options.