score:26

Accepted answer

you can achieve this using the following tooltips label callback function ...

tooltips: {
   callbacks: {
      label: function(tooltipitem, data) {
         var label = data.labels[tooltipitem.index];
         return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
      }
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var ctx = document.getelementbyid('mychart').getcontext('2d');
var scatterchart = new chart(ctx, {
   type: 'scatter',
   data: {
      labels: ["label 1", "label 2", "label 3"],
      datasets: [{
         label: 'legend',
         data: [{
            x: -10,
            y: 0,
         }, {
            x: 0,
            y: 10
         }, {
            x: 10,
            y: 5
         }]
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(tooltipitem, data) {
               var label = data.labels[tooltipitem.index];
               return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="mychart" style="height:1000px"></canvas>

score:5

for multiple labels grunt 's answer needs to be modified to use tooltipitem.datasetindex instead of tooltipitem.index: 

options: {
  tooltips: {
     callbacks: {
        label: function(tooltipitem, data) {
           var label = data.labels[tooltipitem.datasetindex];
           return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
        }
     }
  } }

score:7

as of chart.js version 3, callbacks are handled a little differently. here is a working example with 3.2.0. relevant docs: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback

ctx = document.getelementbyid("mychart").getcontext("2d");

let data = {
    datasets: [{
        label: "legend",
        labels: ["label 1", "label 2", "label 3"],
        data: [{
            x: -10,
            y: 0,
        }, {
            x: 0,
            y: 10
        }, {
            x: 10,
            y: 5
        }],
        backgroundcolor: "rgb(255, 99, 132)"
    }]
}

let options = {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(ctx) {
                    // console.log(ctx);
                    let label = ctx.dataset.labels[ctx.dataindex];
                    label += " (" + ctx.parsed.x + ", " + ctx.parsed.y + ")";
                    return label;
                }
            }
        }
    }
}

scatterchart = new chart(ctx, {
    type: "scatter",
    data: data,
    options: options
});
<canvas id="mychart" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.min.js"></script>


Related Query

More Query from same tag