charts js, doughnut chart not rendering tooptips correctly

Solution 1:

You can achieve that fairly simple with Chart.JS 2.7.2. Add labels to each dataset like this:

data: {
  labels: ['Existing', 'Non'],
  datasets: [
    {
      labels: ['Objects', 'Non-objects'],
      ...
    }, {
      labels: ['Products', 'Non-products'],
      ...
    },
    {
      labels: ['Materials', 'Non-materials'],
      ...
    }
  ]
}

And add the following label tooltip callback:

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var dataset = data.datasets[tooltipItem.datasetIndex];
      var index = tooltipItem.index;
      return dataset.labels[index] + ": " + dataset.data[index];
    }
  }
}

Demo: https://jsfiddle.net/adelriosantiago/fxd6vops/3/

I am sure it is possible with Chart.JS > 3.0 too but I have no idea how since quite a few things changed in the structure.