CODEWITHSUNDEEP
javascriptchart.js
Ben Mayo
Ben Mayo

Reputation: 1325

chart.js scatter chart - displaying label specific to point in tooltip

I'm trying to build a chart.js scatter chart where upon the user hovering over the scatter point, the tool tip reveals the label that is specific to that point.

So each data point would have it's x and y values, and also it's label.

So far I've got 

var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            labels: ["Label 1","Label 2","Label 3"],
            data: [{
                x: -10,
                y: 0,
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                    var label = data.labels[tooltipItem.index];
                    return datasetLabel + ': ' + label;
                }
            }
        }
    }
});
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

</head>
<canvas id="myChart" style = "height:1000px"></canvas>

When I hover over each point, I'd like to see either 'label 1', 'label 2' or 'label 3' appear.

Thanks very much

Upvotes: 18

Views: 21175

Answers (3)

Andri
Andri

Reputation: 567

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>

Upvotes: 13

Lucy Hackett
Lucy Hackett

Reputation: 73

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 + ')';
        }
     }
  } }

Upvotes: 5

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

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>

Upvotes: 27

Related Questions