score:11

Accepted answer

below code is for bar chart add data keys in orders of labels in my case it was thechart in your case it is mychart

datakeys: ["4", "3", "2", "1", "6"],

 document.getelementbyid("chart_vulsev").onclick = function (evt) {
                    var activepoints = thechart.getelementatevent(evt);
                    var theelement = thechart.config.data.datasets[activepoints[0]._datasetindex].data[activepoints[0]._index];
                    //console.log(activepoints);
                    //console.log(theelement);
                    //console.log(thechart.config.data.datakeys[activepoints[0]._index]);
                    window.open("page.aspx?id=" + thechart.config.data.datakeys[activepoints[0]._index]);
                    //alert(thechart.config.data.datakeys[activepoints[0]._index]);
                    //console.log(thechart.config.type);
                }

for pie chart check this snippet

<html>

<head>
  <title>piechart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js"></script>

  <script>
    var data = {
      datasets: [{
        data: [300, 50, 100, 200],
        backgroundcolor: [
          "#a02020",
          "#ed1c24",
          "#ff9900",
          "#109618",
        ]
      }],
      labels: [
        "critical",
        "high",
        "medium",
        "low"
      ]
    };

    $(document).ready(
      function() {
        var canvas = document.getelementbyid("mychart");
        var ctx = canvas.getcontext("2d");
        var mynewchart = new chart(ctx, {
          type: 'pie',
          data: data
        });

        canvas.onclick = function(evt) {
          var activepoints = mynewchart.getelementsatevent(evt);
          var chartdata = activepoints[0]['_chart'].config.data;
          var idx = activepoints[0]['_index'];

          var label = chartdata.labels[idx];
          var value = chartdata.datasets[0].data[idx];

          var url = "http://example.com/?label=" + label + "&value=" + value;
          console.log(url);
          alert(url);
        };
      }
    );
  </script>

</head>

<body>
  <div style="width: 320.750px; height: 156px">
    <canvas id="mychart"></canvas>
  </div>
</body>

</html>

score:8

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];
        }
    }
});

Related Query

More Query from same tag