Chart.js Multiple dataset

Question

I have a problem with Chart.js.

I want an an alert show me the ID value set in the dataset when I click on a point in the chart.

I have tried using getElementsAtEvent(evt);, but it doesn't work as I expected.

Can somebody help me? Thanks!

var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        label: 'Linea A',
        backgroundColor: "transparent",
        borderColor: color[1],
        pointBackgroundColor: color[1],
        pointBorderColor: color[1],
        pointHoverBackgroundColor: color[1],
        pointHoverBorderColor: color[1],
        data: [{
          x: "2014-09-02",
          y: 90,
          id: '1A'
        }, {
          x: "2014-11-02",
          y: 96,
          id: '2A'
        }, {
          x: "2014-12-03",
          y: 97,
          id: '3A'
        }]
      },
      {
        label: 'Linea B',
        backgroundColor: "transparent",
        borderColor: color[2],
        pointBackgroundColor: color[2],
        pointBorderColor: color[2],
        pointHoverBackgroundColor: color[2],
        pointHoverBorderColor: color[2],
        data: [{
          x: "2014-09-01",
          y: 96,
          id: "1B"
        }, {
          x: "2014-10-04",
          y: 95.8,
          id: "2B"
        }, {
          x: "2014-11-06",
          y: 99,
          id: "3B"
        }]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Polveri',
      fontSize: 18
    },
    legend: {
      display: true,
      position: "bottom"
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            'millisecond': 'MM/YY',
            'second': 'MM/YY',
            'minute': 'MM/YY',
            'hour': 'MM/YY',
            'day': 'MM/YY',
            'week': 'MM/YY',
            'month': 'MM/YY',
            'quarter': 'MM/YY',
            'year': 'MM/YY',
          },
          tooltipFormat: "DD/MM/YY"
        }
      }]
    }
  }
});

document.getElementById("myChart").onclick = function(evt) {
  var activePoints = scatterChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[1];
  console.log(firstPoint._datasetIndex);
  console.log(firstPoint._index);
  var label = scatterChart.data.labels[firstPoint._index];
  console.log(scatterChart.data.datasets[0].data[0].id);
  var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
  if (firstPoint !== undefined)
    alert(label + ": " + value);
};

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
</script>
<canvas id="myChart" width="400" height="100"></canvas>

Answer 1

You need to use the .getElementAtEvent() prototype method instead of .getElementsAtEvent(). The difference being the first only returns the single point that you clicked whereas the other returns all points at the X axis for that click.

Here is an example.

document.getElementById("canvas").onclick = function(evt) {
  var activePoint = myLine.getElementAtEvent(event);

  // make sure click was on an actual point
  if (activePoint.length > 0) {
    var clickedDatasetIndex = activePoint[0]._datasetIndex;
    var clickedElementindex = activePoint[0]._index;
    var label = myLine.data.labels[clickedElementindex];
    var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];     
    alert("Clicked: " + label + " - " + value);
  }
};

You can see a demonstration at this codepen.

Answer 2

You have to change your label variable assignment from,

var label = scatterChart.data.labels[firstPoint._index];

To,

var label = scatterChart.data.datasets[firstPoint._index].label;

And you may also need to change your alert statment as,

alert(label + ": " + value.x);

Here is the working DEMO: https://jsfiddle.net/dt6c9jev/

Hope this helps!.