score:5

Accepted answer

label callback can be used to modify a specific label. so try using any of afterbody, footer, afterfooter callback

https://www.chartjs.org/docs/3.0.2/configuration/tooltip.html#tooltip-callbacks

example using footer callback

var branches_canvas = document.getelementbyid('branches_canvas').getcontext('2d');

var branches = new chart(branches_canvas, {
  type: 'bar',
  data: {
    labels: ['org1', 'org2', 'org3', 'org4', 'org5'],
    datasets: [{
        label: 'packed',
        data: [12, 55, 77, 32, 45],
        backgroundcolor: [
          '#94e3ef',
        ],
        hoveroffset: 4
      },
      {
        label: 'unpacked',
        data: [56, 88, 22, 88, 40],
        backgroundcolor: [
          '#ffa8a8',
        ],
      }
    ],

  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          footer: function(items) {
            return 'total: ' + items.reduce((a, b) => a + b.parsed.y, 0)
          }
        }
      },
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>

score:1

you can use the afterbody callback to show the sum.

example:

var branches_canvas = document.getelementbyid('branches_canvas').getcontext('2d');
var branches = new chart(branches_canvas, {
    type: 'bar',
    data: {
        labels: ['org1','org2','org3','org4','org5'],
        datasets: [
        {
            label: 'packed',
            data: [12,55,77,32,45],
            backgroundcolor: [
                '#94e3ef',
            ],
            hoveroffset: 4
        },
        {
            label: 'unpacked',
            data: [56,88,22,88,40],
            backgroundcolor: [
                '#ffa8a8',
            ],
          }
    ],
      
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        var label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += context.parsed.y;
                        }
                        return label;
                    },
                    afterbody: (ttitem) => (`sum: ${ttitem.reduce((acc, val) => (acc + val.raw), 0)}`)
                }
            },
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
            stacked: true
            }
        },
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>


Related Query

More Query from same tag