[Chartjs]-How to add an on click event to my Line chart using Chart.js

by

7👍

✅

Change this line

document.getElementById('roomForChart').innerHTML += htmlForGraph;

to this

holder = document.getElementById('roomForChart');
holder.innerHTML += htmlForGraph;

and further you’ll have your snippet, modified a bit

holder.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

Add console.log(activePoints); within onclick handler to see the content of the activePoints variable. As I can see, there are three objects. For instance these are values for activePoints[0]

datasetLabel: "Usage Plan"
fillColor: "rgba(244,0,0,1)"
highlightFill: "#fff"
highlightStroke: "rgba(220,220,220,1)"
label: "Aug 4"
strokeColor: "#fff"
value: 1024
x: 371
y: 12.356097560975627

And they may be accessed as following

activePoints[0].label
activePoints[0].x
activePoints[0].y
activePoints[0].value

It will be good to check if the property is undefined first, since there are no data behind every click event.

8👍

if youre using the new ChartJs version use this:

canvas.onclick = function(evt){
   var activePoints = myLineChart.getElementsAtEvent(evt);
};

6👍

I couldn’t get the onclick method to work.

But I finally managed to run it using the click method:

$("#canvas_id").click(function(e) {
   var activeBars = myBarChart.getBarsAtEvent(e); 
   console.log(activeBars[0]);
});

Note: this example if for the Bar chart – other charts have slightly different methods to retrieve the points (see the documentation).

5👍

The answers provided to date are close to the correct solution(s), but are incomplete. You need to use the getElementsAtEvent() to get the correct elements, but this gives you a collection of elements that are at the clicked x-index. In the even that you are using more than one dataset, this could be several values, one from each data set.

To figure out the correct data set to pull from, call the getDatasetAtEvent() method. This will return a list of the elements that contains the clicked dataset element. Pick the dataset Id from any of them, they are all the same Id.

Put the two together and you have the call you need to figure out the data contained in the clicked element. Passing in more than just and x and y value when you init your data set will let you do all sorts of neat tricks with this event. (For example, trigger a popup with more detailed info about the event)

There might be a more succinct way of getting this data, but I didn’t find it mucking around the chart docs and tickets. Perhaps they will add it in a future release.

// chart_name is whatever your chart object is named. here I am using a
// jquery selector to attach the click event.
$('#' + chart_name).click(function (e)
{
    var activePoints = myChart.getElementsAtEvent(event);
    var activeDataSet = myChart.getDatasetAtEvent(event);

    if (activePoints.length > 0)
    {
         var clickedDatasetIndex = activeDataSet[0]._datasetIndex;
         var clickedElementIndex = activePoints[0]._index;
         var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    }
    // todo: add code to do something with value.
});

2👍

V3

You can also use the build in onClick option which gets the following paramters: (event, activeElements, chartInstance)

So you can just read the array you get as second element to see which elements have been active. By default this array contains only 1 item but if you change your interaction modes multiple items could be in here.

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'orange'
      }
    ]
  },
  options: {
    onClick: (evt, activeElements, chart) => {
      console.log(`DatasetIndex: ${activeElements[0].datasetIndex} DataIndex: ${activeElements[0].index}`)
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

In v3 the getElementsAtEvent has been removed and now you have to use: chart.getElementsAtEventForMode(event, 'index', { intersect: true }, false)

If you want to use getDatasetAtEvent you now have to use: chart.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)

0👍

In current version(3.9.1) i could not find .getPointsAtEvent(event) no more.
As a workaround that worked for me I found in Chart.js GitHub
code sample

 var selectedPoint;
        ....
        options: {
            plugins: {
                tooltip: {
                    callbacks: {
                        afterBody: function(context) {
                           if(context && context[0])
                            selectedPoint = context[0];
                            return [''];
                        }
                    }
                }
            },
            .....
            onClick: (e) => {
                console.log(selectedPoint);
            }
        }

Basicaly on tooltip generation you save data to variable selectedPoint and in onClick event you start using it.

Leave a comment