title: Chart.js Multiple dataset
body: <p>I have a problem with Chart.js.</p>
  <p>I want an an alert show me the ID value set in the dataset when I click on a point in the chart.</p>
  <p>I have tried using <code>getElementsAtEvent(evt);</code>, but it doesn't work as I expected.</p>
  <p>Can somebody help me? Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"&gt;
  &lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="100"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>