Chart.js : bar spacing in horizontal bar chart

Question

  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 linklink

xuhcc xuhcc · Accepted Answer · 2016-12-24T11:22:27

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

Chart.js : bar spacing in horizontal bar chart

2 Answers