score:1

Accepted answer

It just works fine, the only thing that is different is that it seems like in v2 it defaulted to the point mode while now it is using index mode, if you change it back to point it works as expected:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'point',
        callbacks: {
          beforeBody: (ttItems, x) => {
            ttItems.forEach((ttItem) => {
              console.log('BeforeBody: ', ttItem.datasetIndex, ttItem.dataIndex)
            })
          },
          afterBody: (ttItems, x) => {
            ttItems.forEach((ttItem) => {
              console.log('AfterBody: ', ttItem.datasetIndex, ttItem.dataIndex)
            })
          }
        }
      }
    },
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>


Related Query

More Query from same tag