Reputation: 13
I want to create stacked bar chart with groups in use chart.js v3. I
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
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