Revert tooltip order - chart.js

Question

I am creating a full % stacked area chart using Chart.js. However, I cannot find in the documentation how to reverse the order in which the values are shown in the tooltip.
Here is what I get:
As you can see, the top area (in blue) is the bottom one in the tooltip.
My code:
var ctx = document.getElementById("EvolutionBreackdownsChart");
var EvolutionBreackdownsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April"],
datasets: [{
label:'O',
data: [20, 21, 19, 17, 22, 25, 23, 18, 15, 16, 17, 19, 20],
fill: 'origin',
backgroundColor: 'rgba(255, 148, 31, 0.2)',
borderWidth:0.1,
borderColor: 'rgba(255, 148, 31, 0.55)',
pointRadius:3,
pointBackgroundColor: 'rgba(255, 148, 31, 0.2)',
pointBorderColor: 'rgba(255, 148, 31, 0.55)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'A',
data: [30, 28, 29, 32, 32, 31, 25, 29, 29, 30, 31, 28, 29],
fill: '-1',
backgroundColor:'rgb(255, 148, 31, 0.35)',
borderWidth:0.1,
borderColor: 'rgb(255, 148, 31, 0.75)',
pointRadius:3,
pointBackgroundColor: 'rgb(255, 148, 31, 0.35)',
pointBorderColor: 'rgb(255, 148, 31, 0.75)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'M',
data: [10, 12, 13, 10, 11, 12, 11, 10, 12, 11, 11, 10, 9],
fill: '-1',
backgroundColor:'rgb(255, 148, 31, 0.5)',
borderWidth:0.1,
borderColor: 'rgb(255, 148, 31, 0.9)',
pointRadius:3,
pointBackgroundColor: 'rgb(255, 148, 31, 0.5)',
pointBorderColor: 'rgb(255, 148, 31, 0.9)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'R',
data: [28, 29, 32, 31, 27, 25, 31, 33, 28, 33, 31, 30, 32],
fill: '-1',
backgroundColor:'rgba(255, 148, 31, 0.60)',
borderWidth:0.1,
borderColor: 'rgba(255, 148, 31, 1)',
pointRadius:3,
pointBackgroundColor: 'rgba(255, 148, 31, 0.60)',
pointBorderColor: 'rgba(255, 148, 31, 1)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
}, {
label:'B',
data: [12, 10, 7, 10, 8, 7, 10, 10, 16, 10, 10, 13, 10],
fill: '-1',
backgroundColor:'rgba(3, 169, 244, 0.25)',
borderWidth:0.1,
borderColor: 'rgba(3, 169, 244, 1)',
pointRadius:3,
pointBackgroundColor: 'rgba(3, 169, 244, 0.25)',
pointBorderColor: 'rgba(3, 169, 244, 1)',
pointHoverRadius:5,
pointHoverBorderWidth:1,
lineTension:0,
},],
},
options: {
scales: {
yAxes: [{
stacked:true,
gridLines: {
display:false,
},
ticks: {
beginAtZero:true,
fontColor:'#999999',
fontFamily:"'Source Sans Pro', sans-serif",
fontSize:10,
},
}],
xAxes: [{
ticks:{
fontColor:'#999999',
fontFamily:"'Source Sans Pro', sans-serif",
fontSize:10,
maxTicksLimit: 15,
callback: function(tick) {
var characterLimit = 4;
if (tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim();;
}
return tick;
},
},
}]
},
legend: {
display: false,
},
tooltips: {
backgroundColor:'rgba(3, 169, 244, 0.75)',
bodyFontFamily:"'Source Sans Pro', sans-serif",
titleFontStyle:"normal",
bodyFontFamily:"'Source Sans Pro', sans-serif",
displayColors: true,
cornerRadius:0,
intersect:false,
mode: 'x-axis',
callbacks: {
title: function(tooltipItem){
return this._data.labels[tooltipItem[0].index];
}
},
},
}
});
Can you help?

Answer 1

You can reverse the order of tooltip values, using itemSort function, like so ...
tooltips: {
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex;
},
...
}