Chartjs-Chartjs Stacked bar have a stack id per x value

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>

Leave a comment