How to Get Click Event in Chart.js?

1

<canvas id="myChart"></canvas>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Get the canvas element and create the chart
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // Chart configuration (data, options, etc.)
    // ...
});

// Event handler for click event on chart
function handleClick(event) {
    var activeElement = chart.getElementAtEvent(event)[0];
    if (activeElement) {
        // Access the label and value of the clicked element
        var label = chart.data.labels[activeElement._index];
        var value = chart.data.datasets[activeElement._datasetIndex].data[activeElement._index];
        
        // Perform any desired action with the label and value
        console.log('Clicked on: ' + label + ' with value: ' + value);
    }
}

// Attach the event handler function to the click event of the chart canvas
document.getElementById('myChart').addEventListener('click', handleClick);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var chartConfig = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My Dataset',
      data: [10, 20, 15, 25, 30, 27, 40]
    }]
  },
  options: {
    onClick: handleClick // bind the handleClick function to the click event
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function handleClick(event, chartElements) {
  if (chartElements.length > 0) {
    var clickedElementIndex = chartElements[0]._index;
    var clickedDatasetIndex = chartElements[0]._datasetIndex;
    
    var clickedLabel = chartConfig.data.labels[clickedElementIndex];
    var clickedValue = chartConfig.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    
    console.log("Clicked on " + clickedLabel + " (Value: " + clickedValue + ")");
  }
}

1

var myChart = new Chart(document.getElementById('myChart'), chartConfig);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var chart = new Chart(ctx, {
    // chart configuration
});

chart.canvas.addEventListener('click', function(e) {
    var activePoints = chart.getElementsAtEventForMode(e, 'point', { intersect: true }, false);
    if (activePoints.length > 0) {
        var clickedElement = activePoints[0];
        var datasetIndex = clickedElement.datasetIndex;
        var index = clickedElement.index;
        var data = chart.data.datasets[datasetIndex].data[index];
        
        console.log(data); // Now, you have access to the data associated with the clicked element
    }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    onClick: handleClick // Provide the 'handleClick' function as the callback
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function handleClick(event, elements) {
  if (elements.length > 0) {
    // Get the clicked element
    var clickedElement = elements[0];

    // Get the data associated with the clicked element
    var chartData = clickedElement._chart.data;
    
    // Perform your custom actions here based on the clicked element or data
    console.log(clickedElement);
    console.log(chartData);
  }
}