[Chartjs]-Chart.js Multiple dataset

by

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!.

0👍

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.

Leave a comment