CODEWITHSUNDEEP
javascriptangularjschart.js
john_mc
john_mc

Reputation: 1376

Stacked bar chart results in misaligned bars

I'm attempting to create a bar chart that stacks the bars for three respective data series. I'm using Chart.js with angular charts. I have the stacked property set accordingly with: stacked: true, yet the bars do not align with one another vertically.

Basically, my question is: how do I make the data from each series line up so that the bars are of uniform width but with staggered colors vertically?

Here's some of my chart configuration code:

$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
                }
            }
        ]
    }
};

enter image description here

Upvotes: 4

Views: 2231

Answers (1)

xnakos
xnakos

Reputation: 10206

You should also set stacked: true for the x-axis. Your scales should, therefore, look like this:

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

Have a look at Bar Chart Options and at the first code sample of the section. In this code sample, stacked: true is set for both axes, x-axis and y-axis. This will get you a stacked bar chart as you want it.

Upvotes: 2

Related Questions