0👍
Please read the documentation to understand how the data is populated.
All the properties in labels
corresponds to what is to be shown in the xAxis in your case it is inverted.
The number of items in the datasets corresponds to the legend and the label
property of each dataset
is used as the text for the legend.
Please see the changes code as per my understanding of your problem or fiddle -> https://jsfiddle.net/bcxzu39v/
var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
labels: [
"AMER",
"APAC",
"EMEA"
],
datasets: [{
label: ['SFO'],
data: [23.2, 0, 0],
backgroundColor: 'red'
},
{
label: ['CHI'],
data: [6.3, 0],
backgroundColor: 'brown'
},
{
label: ['INDIA'],
data: [0, 3, 0],
backgroundColor: 'green'
},
{
label: ['ANZ'],
data: [0, 7, 0],
backgroundColor: 'lightgreen'
}
]
};
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}]
}
}
});
Source:stackexchange.com