[Chartjs]-ChartJs 2.0 How do I obtain point information being clicked upon?

by

20👍

✅

You should be able to use the getElementsAtEvent method, like so

document.getElementById("myChart").onclick = function(evt){
    var activePoints = myRadar.getElementsAtEvent(evt);
    // use _datasetIndex and _index from each element of the activePoints array
};

Fiddle – http://jsfiddle.net/uwaszvk7/

9👍

I have a graph with multiple data sets. Using the proposed getElementsAtEvent(evt) function, returns all data sets at a given x position but not only the single dataset index that I clicked on. So, there is no possibility to identify the individual data set.

To get only the single point clicked on:

const activePoint = chartObj.getElementAtEvent(event);
const datasetIndex = activePoint[0]._datasetIndex;
const itemIndex = activePoint[0]._index;

Notice the missing “s” in getElementAtEvent() compared to getElementsAtEvent().

7👍

In addition you can use var activePoints = chartObj.getElementsAtXAxis(evt); to get the nearest active element based just on the x-axis. (Super useful for when you have some really small values)

6👍

Another way to achieve this in ChartJS 2.0 is to use the lastActive property of the radar chart.

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

4👍

Calling getElementsAtEvent(event) on your Chart instance passing an
argument of an event, or jQuery event, will return the point elements
that are at that the same position of that event.

...
var canvas = document.getElementById("myChart");
var myRadar = new Chart(canvas, config);
canvas.onclick = function(evt) {

    // => activePoints is an array of points on the canvas that are at the same position as the click event.
    var activePoint = myRadar.getElementsAtEvent(evt)[0];

    if (activePoint !== undefined) {
        var dataset = myRadar.data.datasets[activePoint._datasetIndex];
        var title = myRadar.data.labels[activePoint._index];
        var oldValue = dataset.data[activePoint._index];
        var newValue = oldValue + 10;
        dataset.data[activePoint._index] = newValue;
    }

    // Calling update now animates element from oldValue to newValue.
    myRadar.update();

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue);
};

Leave a comment