I have problem in my javascript. This is my bar graph
i have 3 bar in one month. each bar have 3 status of every candidate. i have three year of average from my bar graph.
i want just three of this from my bar graph. And remove duplicate content to get a better bar graph in my project. this is my code.
new Chart(document.getElementById("MyChart"), {
type: 'bar',
data: {
labels: [2017, 2018, 2019],
datasets: [{
label: "Gagal",
type: "bar",
stack: "Base",
backgroundColor: "red",
data: [30, 31, 32],
}, {
label: "Menunggu",
type: "bar",
stack: "Base",
backgroundColor: "yellow",
data: [15, 16, 17],
},{
label: "Lulus",
type: "bar",
stack: "Base",
backgroundColor: "green",
data: [15, 16, 17],
}, {
label: "Gagal",
type: "bar",
stack: "Sensitivity",
backgroundColor: "red",
data: [20, 21, 22],
}, {
label: "Menunggu",
type: "bar",
stack: "Sensitivity",
backgroundColor: "yellow",
backgroundColorHover: "yellow",
data: [10, 11, 12]
},{
label: "Lulus",
type: "bar",
stack: "Sensitivity",
backgroundColor: "green",
backgroundColorHover: "green",
data: [10, 11, 12]
},
{
label: "Gagal",
type: "bar",
stack: "Kehormat",
backgroundColor: "red",
data: [20, 21, 22],
}, {
label: "Menunggu",
type: "bar",
stack: "Kehormat",
backgroundColor: "yellow",
backgroundColorHover: "yellow",
data: [10, 11, 12]
}, {
label: "Lulus",
type: "bar",
stack: "Kehormat",
backgroundColor: "green",
backgroundColorHover: "green",
data: [10, 11, 12]
}]
},
options: {
scales: {
xAxes: [{
//stacked: true,
stacked: true,
ticks: {
beginAtZero: true,
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
stacked: true,
}]
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="MyChart" width="400" height="200" ></canvas>i want make stacked group bar graph for my company. please help me.