How to make multiple stacked charts to share the same yAxis? - chart.js

Question

I have 2 charts with different data, stacked on top of each other. How do I make those 2 charts share the same scale of 1 y-axis?
I configured the y-Axis as follow:
yAxes: [{
display: true,
stacked: true,
type: "linear",
scaleLabel: {
display: true,
labelString: "Amount in USD"
},
ticks: {
beginAtZero: true,
max: 150000,
callback: function(label, index, labels) {
return label / 1000 + "k";
}
}
}]
And the data set as follow:
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
backgroundColor: "#FFE0B2",
datasets: [{
label: "Amount of Sales - YTD",
data: [0, 0, 0, 0, 0, 0, 0, 104920, 87461, 22700, 0, 0],
backgroundColor: [
"#FFE0B2"
],
borderColor: [
"#FF9800"
],
borderWidth: 1,
pointBackgroundColor: "#FFE0B2",
pointBorderColor: "#FF9800",
pointBorderWidth: 2
}, {
label: "Amount of Commission - YTD",
data: [0, 0, 0, 0, 0, 0, 0, 1896, 4373, 1135, 0, 0],
backgroundColor: [
"#F8BBD0"
],
borderColor: [
"#E91E63"
],
borderWidth: 1,
pointBackgroundColor: "#F8BBD0",
pointBorderColor: "#E91E63",
pointBorderWidth: 2
}]
Please have a look at: https://jsfiddle.net/pyzaq4j3/
As you can see, in August, the point (orange) is set at ~100k, which is correct.
However, the point (pink) has the value of only ~1.8k, and the point is almost at ~100k, according to the graph.
Question: How do I set it so that the pink graph shares the same y-axis as the orange graph?

Answer 1

The problem is with this line in the y-axis:
stacked: true,
If you'll remove it, it won't stack the values together.
However, since you specified backgroundColor on your datasets, and the first dataset is "Amount of Sales - YTD" which has higher values, it will block the visual of your second dataset.