JavaScript array value to chart.js graph as stacked graph - graph

Question

I have the following data
new Chart(ctx2, {
type: 'bar',
data: {
labels: $scope.teamGraphAssociateName,
datasets: [{
data: $scope.teamGraphAgileRewards,
backgroundColor: $scope.backgroundColors,
borderWidth: 1.5
}
]
}
});
This data gets success data of all the associates name on the (X axis) from labels.
For the $scope.teamGraphAgileRewards in console i'm getting data like this:
(3) [Array(1), Array(2), Array(1)]
0: [7]
1: (2) [2, 3]
2: [10]
length: 3
I'm getting the grap like this.(only the last array [10] is getting visible on graph)
Y
|
|
|
| 10
|_______________ X
ASS1 ASS2 ASS3
(labels)
But I want this data to be visible on stacked bar graph like this.
Y
|
| 3
|
| 7 2 10
|_______________ X
ASS1 ASS2 ASS3
(labels)

Answer 1

Well, you will need to rearange your data. Data structure of chart is different than this you are sending to chart. See example:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["ASS1", "ASS2", "ASS3"],
datasets: [{
stack: 'Stack 0',
data: [7, 3, 10],
backgroundColor: 'blue'
},
{
stack: 'Stack 0',
data: [0, 2, 0],
backgroundColor: 'green'
}]
},
options: {
legend: {
display: false
},
responsive: false,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
That's how your chart should look like. Each data what you add to dataset is sent to labels, so when you send arrays in array it can't be recognized, that you want to add multiple values for one label. Group your values in way, that you have 3 values for one dataset (['ASS1value', 'ASS2value', 'ASS3value']), like I've added in sample.