2👍
This looks roughly what like what you want:
var data = {
labels: ["Paris", "London", "Mumbai"],
datasets: [{
label: "Store",
backgroundColor: 'blue',
data: [15, 20, 25],
xAxisID: "bar-x-axis2",
stack: "background"
}, {
label: "Online",
backgroundColor: 'red',
data: [30, 25, 15],
xAxisID: "bar-x-axis2",
stack: "background"
}, {
label: "Target",
backgroundColor: 'rgba(0,0,0,0.5)',
data: [30, 40, 50],
xAxisID: "bar-x-axis1",
fill: false
}]
};
var options = {
scales: {
xAxes: [{
id: "bar-x-axis2",
stacked: true,
categoryPercentage: 0.5,
barPercentage: 0.5,
}, {
display: false,
id: "bar-x-axis1",
type: 'category',
categoryPercentage: 0.4,
barPercentage: 1,
gridLines: {
offsetGridLines: true
},
stacked: true
}],
yAxes: [{
max: 100,
min: 0,
stacked: true
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
- [Chartjs]-How can I datalabels and Sum display in the same time on a stacked bar
- [Chartjs]-How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
Source:stackexchange.com