score:1

Accepted answer

your tooltips.callbacks should look as follows:

tooltips: {
  callbacks: {
    title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
    label: (tooltipitems, data) => data.datasets[tooltipitems.datasetindex].label + ' ' + data.datasets[tooltipitems.datasetindex].data[tooltipitems.index],
    footer: (tooltipitems, data) => ['', 'description:'].concat(data.datasets[tooltipitems[0].datasetindex].info)
  }
}

please have a look at your amended code below:

var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];

var ctx = document.getelementbyid('chbar');
new chart(ctx, {
  type: 'bar',
  data: {
    labels: ['proportion of coded projects'],
    datasets: [{
        label: 'coded projects',
        data: [70],
        backgroundcolor: '#d6e9c6',
        info: [
          ['this refers to projects that have not'],
          ['been qualitatively coded using the tdf.']
        ]
      },
      {
        label: 'remaining projects',
        data: [170],
        backgroundcolor: colors.slice(0, 1),
        info: [
          ['this refers to total number'],
          ['of projects left to code.']
        ]
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
        label: (tooltipitems, data) => data.datasets[tooltipitems.datasetindex].label + ' ' + data.datasets[tooltipitems.datasetindex].data[tooltipitems.index],
        footer: (tooltipitems, data) => ['', 'description:'].concat(data.datasets[tooltipitems[0].datasetindex].info)
      }
    },
    scales: {
      xaxes: [{
        stacked: true
      }],
      yaxes: [{
        stacked: true
      }]
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="chbar"></canvas>


Related Query

More Query from same tag