ChartJs how can I move bar into new group? - chart.js

Question

this one has been annoying me for too long now, ha.
So I just want to manually control the group bars, the blue one below should be under Checkout 2.
Any help much appreciated.
var data = [
{
label: "Android",
type: "bar",
stack: "One",
backgroundColor: "#F6AC74",
data: [4]
},
{
label: "iOS",
type: "bar",
stack: "One",
backgroundColor: "#9FA0EF",
data: [6]
},
{
label: "Web",
type: "bar",
stack: "One",
backgroundColor: "#F495C6",
data: [14]
},
{
label: "Apple Pay",
type: "bar",
stack: "Two",
backgroundColor: "#AEE9DD",
data: [6]
},
{
label: "Google Pay",
type: "bar",
stack: "Two",
backgroundColor: "#D3F284",
data: [14]
}
,
{
label: "Cash",
type: "bar",
stack: "Three",
backgroundColor: "#65C2F8",
data: [4]
}
];
$scope.AdvancedMethodStackedBarChart = new Chart(document.getElementById("advPaymentMethodChart"), {
type: 'bar',
data: {
labels: ["Checkout 1", "Checkout 2"],
datasets: data
},
options: {
legend: { display: false },
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
stacked: true,
}]
},
title: {
display: false,
}
}
});
It's saying my comment is mostly code but theres not exactly much more I need to say, I mean I've drawn a picture, how much more detail does this thing want?

Answer 1

To move it over you need to tell chart.js the value should be mapped to the second label by placing it in the second place in the data array, this can be achieved by adding a null value in front of it. So your cash dataset will look like this:
{
label: "Cash",
type: "bar",
stack: "Three",
backgroundColor: "#65C2F8",
data: [null, 4]
}