score:0

Accepted answer

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>


Related Query

More Query from same tag