title: How can I datalabels and Sum display in the same time on a stacked bar
body: <p>I try to have in the same time datalabels and the sum display in my stacked bar chart.</p>
  
  <p>I use chartjs-plugin-datalabels.js to display datalabels or sum.</p>
  
  <p>Above just with datalabels:
  <a href="https://i.stack.imgur.com/5PaEZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5PaEZ.png" alt="With datalabels"></a></p>
  
  <p>Above just with sum :
  <a href="https://i.stack.imgur.com/N04lL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N04lL.png" alt="enter image description here"></a></p>
  
  <p>I would like to have both in the same chart.</p>
  
  <p>I use the follow tricks to sum display : </p>
  
  <pre><code>&lt;script&gt;
      const totalizer = {
    id: 'totalizer',
  
    beforeUpdate: chart =&gt; {
      let totals = {}
      let utmost = 0
  
      chart.data.datasets.forEach((dataset, datasetIndex) =&gt; {
        if (chart.isDatasetVisible(datasetIndex)) {
          utmost = datasetIndex
          dataset.data.forEach((value, index) =&gt; {
            totals[index] = (totals[index] || 0) + value
          })
        }
      })
  
      chart.$totalizer = {
        totals: totals,
        utmost: utmost
      }
    }
  }
  
  new Chart('chart', {
    type: 'bar',
    data: {
      labels: ["Note par thème du répondant", "Note par thème sectorielle", "Note par thème générale"],
      datasets: [{
              label: 'Thème 1',
              data: [12, 19, 3],
              backgroundColor: 'rgba(255, 206, 86)'            
          },
          {
              label: 'Thème 2',
              data: [3,8,1],
              backgroundColor: 'rgba(54, 162, 235)'                        
          },
          {
              label: 'Thème 3',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(255, 255, 132)'                
          },{
              label: 'Thème 4',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(255, 99, 255)'                
          },{
              label: 'Thème 5',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(100, 250, 132)'                
          },{
              label: 'Thème 6',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(89, 99, 132)'                
          },{
              label: 'Thème 7',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(255, 0, 132)'                
          },{
              label: 'Thème 8',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(0, 150, 255)'                
          },{
              label: 'Thème 9',
              data: [ 5, 2, 3],
              backgroundColor: 'rgba(100, 100, 100)'                
          },{
              label: 'Thème 10',
              data: [ 10, 4, 7],
              backgroundColor: 'rgba(255, 255, 0)'                
          }]
    },
    options: {
      title :{
          display :true,
          text : "Mon titre"
      },
      scales: {   
        yAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true,
            suggestedMax: 100
          }
        }],
        xAxes: [{
          stacked: true
        }]
      },
      plugins: {
        datalabels: {
          formatter: (value, ctx) =&gt; {
            const total = ctx.chart.$totalizer.totals[ctx.dataIndex]
            return total.toLocaleString('fr-FR', {})
          },
          align: 'end',
          anchor: 'end',
          display: function(ctx) {
            return ctx.datasetIndex === ctx.chart.$totalizer.utmost
          }
        }
      }
    },
    plugins: [totalizer]
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>I would appreciate any help. Thanks!</p>