The folded histogram leads to a displacement of the bars

Question

I am trying to create a histogram that stacks columns for three corresponding data series. I am using Chart.js with angular charts. I have a stacked property set accordingly: stacked: truebut the stripes are not aligned vertically with each other.

Basically, my question is: how can I make the data from each series of rows so that the stripes have a uniform width, but with vertical colors vertically?

Here is the configuration code for my chart:

$scope.barLabels = ['-120 to -80', '-80 to -70', '-70 to -60', '-60 to -50', '-50 to -10'];
$scope.barData = [
    [3, 9, 2, 11, 5],
    [6, 9, 2, 11, 5],
    [2, 1, 2, 4, 5]
];

$scope.barOptions = {
    legend: {
        display: false
    },
    scales: {
        yAxes: [
            {
                stacked: true,
                display: true,
                position: 'left',
                ticks: {
                    beginAtZero: true,
                    min: 0
                }
            }
        ]
    }
};

Answer 1

You must also set stacked: truethe x axis. Therefore, your scalesshould look like this:

...
scales: {
    xAxes: [{
        stacked: true
    }],
    yAxes: [{
        stacked: true,
        display: true,
        position: 'left',
        ticks: {
            beginAtZero: true,
            min: 0
        }
    }]
}
...

. stacked: true , x y. , .