user3176661
user3176661

Reputation: 13

Chartjs v3 overlap stacked bar chart with groups

I want to create stacked bar chart with groups in use chart.js v3. I

my chart output

I did it and i am getting the following image. But here, instead of the sum of label 1 and label2 appearing as 7000, how can I show the intersection of label 1 and label 2 together as 4000 by starting from the x-axis.

    type: 'bar',
    data: {
        labels: labelsVals,
        datasets: [
            {
                label: 'Label 1',
                data: seriesValsPaid,
                backgroundColor: 'rgba(21, 169, 225, 0.6)',
                borderColor: 'rgba(21, 169, 225, 1)',
                borderWidth: 1,
                 stack: 'first',

            },
            {
                label: 'Label 2',
                data: seriesValsWaiting,
                backgroundColor: 'rgba(21, 122, 225, 0.6)',
                borderColor: 'rgba(21, 122, 225, 1)',
                borderWidth: 1,
                 stack: 'first',
            },
            {
                label: 'Label 3',
                data: seriesValsOutgoing,
                backgroundColor: 'rgba(255, 0, 0, 0.6)',
                borderColor: 'rgba(255, 0, 0, 1)',
                borderWidth: 1,
                 stack: 'second',
            }
        ]
    },

});

Upvotes: 1

Views: 826

Answers (1)

user3176661
user3176661

Reputation: 13

            options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                'bar-x-axis1': {
                    stacked: true,
                    display:false
                },
                'bar-x-axis2': {
                    stacked: true,
                    display:false
                },
                y: {
                    stacked: false,
                    beginAtZero: true
                    // display:false
                }
            }
        }

This is how I solved the problem.

Upvotes: 0

Related Questions