How to get click event in Chart.js

user_7433195 0
Viewed 13487

I have Bar chart and Pie Chart to drew using Chart.js.I hope that display Popup Window when it click specific title bar.

Example:

  1. I have bar chart
    a. (label name : Apple, Strawberry, Banana, Mango, Grape, Oragne)

  2. I clicked specific label of several labels
    a. (click: Apple, Total amount of Apple : 7ea)

  3. Then a pop-up window that use the value passed to the parameter URL will appear, showing more information about the apple inside. a. (Korea apple: 1ea, America apple: 3ea, China apple: 2ea, Japan apple: 1ea)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Apple", "Strawberry", "Banana", "Mango", "Grape", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [7, 8, 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: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

$(document).ready(function () {
    $("#myChart").click(
    function (e) {
          /* need programing code */
    });
});
chart.js asp.net jquery
2 Answers

The docs are not very clear, but the new way of handling it is like this:

var myChart = new Chart(ctx, {

    ...

    options: {
        onClick: (evt, item) => {
            let index = item[0]["_index"];
            let fruit = item[0]["_chart"].data.labels[index];
            let votes = item[0]["_chart"].data.datasets[0].data[index];
        }
    }
});
user_969440
Related