How to put 2 labels and distinct tooltips from two bars

by

0👍

✅

Solution to the question

You can accomplish this by changing the tooltip mode to x instead of index, please refer to this documentation.

options: {
    tooltips: {
        mode: 'x'
    }
}

Fixing the total value as asked

Here is a solution implemented by me based on the code presented on the question and probably from this thread where we can find a basic explanation who this work.

Fist, create an dataset array that belong to the same stack as the hovered tooltip, to do so:

var dataStack = data.datasets.filter(
    x => x.stack == data.datasets[tooltipItem.datasetIndex].stack
);

Then, we can check if the callback is for the last dataset of this list (so the total is added only at the end)

if (data.datasets[tooltipItem.datasetIndex] != dataStack[dataStack.length - 1])

Also, I changed the location where the total is calculated since we only need to calculate it when the last callback is called.

Here is a full working example:

var ctx = document.getElementById('bar-chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [' mai', ' juin', ' juillet', ' aout', ' septembre', ' octobre', ' novembre', ' decembre', ' janvier', ' fevrier', ' mars', ' avril', ],
    datasets: [{
        label: "l'année derniere male",
        backgroundColor: 'rgb(5, 90, 130)',
        borderColor: 'rgb(254, 90, 130)',
        data: [5, 2, 0, 4, 2, 4, 5, 0, 7, 3, 0, 8],
        stack: 1
      },
      {
        label: "l'année derniere femelle",
        backgroundColor: 'rgb(120, 99, 132)',
        borderColor: 'rgb(254, 90, 130)',
        data: [7, 0, 3, 0, 9, 0, 1, 0, 8, 0, 10, 2],
        stack: 1
      },
      {
        label: 'Male cette annee',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 2, 0, 4, 2, 0, 5, 0, 7, 0, 0, 1],
        stack: 2
      },
      {
        label: 'femelle cette annee',
        backgroundColor: 'rgb(100, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 12, 0, 1, 5, 0, 6, 0, 7, 0, 8, 15],
        stack: 2
      }
    ]
  },
  options: {
    tooltips: {
      mode: 'x',
      callbacks: {
        label: function(tooltipItem, data) {
          var corporation = data.datasets[tooltipItem.datasetIndex].label;
          var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var dataStack = data.datasets.filter(x => x.stack == data.datasets[tooltipItem.datasetIndex].stack);

          if (data.datasets[tooltipItem.datasetIndex] != dataStack[dataStack.length - 1]) {
            return corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
          } else {
            var total = 0;
            for (var i = 0; i < dataStack.length; i++)
              total += dataStack[i].data[tooltipItem.index];
            return [corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : " + total];
          }
        },
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          suggestedMax: 50
        }
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="bar-chart" width="400" height="300"></canvas>

Leave a comment