1👍
✅
You could use two distinct datasets for the differences as shown in your amended code below.
function ConvertMinutes(num) {
d = Math.floor(num / 1440); // 60*24
h = Math.floor((num - (d * 1440)) / 60);
m = Math.round(num % 60);
if (d > 0) {
return (d + " Tage, " + h + " Stunden, " + m + " Minuten");
} else if (h > 0) {
return (h + " Stunden, " + m + " Minuten");
} else {
return (m + " Minuten");
}
}
var myChart = document.getElementById("myChart").getContext("2d");
var chart = new Chart(myChart, {
type: 'bar',
data: {
labels: ['2021-01-26', '2021-01-27', '2021-01-28', '2021-01-29', '2021-01-30', '2021-01-31', '2021-02-01', '2021-02-02', '2021-02-03', '2021-02-04', '2021-02-05', ],
datasets: [{
label: "Emil",
backgroundColor: 'rgb(255, 0, 0)',
data: [
716, 755, 1681, 890, 482, 494, 753, 364, 832, 889, 702,
],
stack: 2
}, {
label: "Luis",
backgroundColor: 'rgb(0, 0, 255)',
data: [716, 974, 1006, 1133, 551, 638, 663, 288, 754, 0, 45],
stack: 1
}, {
label: "Differenz",
backgroundColor: 'rgb(0,255,0)',
data: [0, 219, 0, 243, 69, 144, 0, 0, 0, 0, 0],
stack: 2,
},
{
label: "Differenz",
backgroundColor: 'rgb(0,255,0)',
data: [0, 0, 675, 0, 0, 0, 90, 76, 78, 889, 657],
stack: 1,
}
],
},
options: {
title: {
display: true,
text: 'Onlinezeit der letzten 10 Tage im Vergleich'
},
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex < 3
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(t, d) {
var data1 = parseInt(d.datasets[0].data[t.index]);
var label1 = d.datasets[0].label;
var data2 = parseInt(d.datasets[1].data[t.index]);
var label2 = d.datasets[1].label;
var proz = 0.0;
var min = 0;
if (data1 > data2) {
proz = Math.round(((data1 - data2) / data1) * 100, 2);
min = data1 - data2;
} else {
proz = Math.round(((data2 - data1) / data2) * 100, 2);
min = data2 - data1;
}
if (t.datasetIndex === 0) {
if (data1 >= data2) {
return label1 + ": " + ConvertMinutes(data1) + " (+" + proz + "%)";
} else {
return label1 + ": " + ConvertMinutes(data1) + " (-" + proz + "%)";
}
} else if (t.datasetIndex === 1) {
if (data2 >= data1) {
return label2 + ": " + ConvertMinutes(data2) + " (+" + proz + "%)";
} else {
return label2 + ": " + ConvertMinutes(data2) + " (-" + proz + "%)";
}
} else if (t.datasetIndex === 2 && data1 < data2) {
return undefined;
} else if (t.datasetIndex === 3 && data1 >= data2) {
return undefined;
} else {
return d.datasets[t.datasetIndex].label + ": " + proz + "% (" + min + "min)";
}
}
}
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + " min";
}
},
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="120"></canvas>
Source:stackexchange.com