score:34

Accepted answer

you could accomplish this using the following on-click event handler for your chart ...

canvas.onclick = function(evt) {
   var activepoint = mychart.getelementatevent(evt)[0];
   var data = activepoint._chart.data;
   var datasetindex = activepoint._datasetindex;
   var label = data.datasets[datasetindex].label;
   var value = data.datasets[datasetindex].data[activepoint._index];
};

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var chartdata = {
   type: 'horizontalbar',
   data: {
      labels: ['a0224', 'a3681', 'a3984', 'a4101', 'a4150', 'b0682', 'others'],
      datasets: [{
         label: "p1",
         backgroundcolor: '#cc3399',
         data: [6, 7, 6, 8, 6, 10, 3]
      }, {
         label: "p2",
         backgroundcolor: '#0099ff',
         data: [8, 9, 5, 8, 6, 10, 3]
      }, {
         label: "p3",
         backgroundcolor: '#0022ff',
         data: [6, 7, 6, 8, 6, 10, 3]
      }]
   },
   options: {
      responsive: false,
      legend: {
         display: false
      },
      scales: {
         yaxes: [{
            stacked: true
         }],
         xaxes: [{
            stacked: true
         }]
      },

   }
}

var canvas = document.getelementbyid('createcurryearhccgapchart');
var mychart = new chart(canvas, chartdata);

canvas.onclick = function(evt) {
   var activepoint = mychart.getelementatevent(evt)[0];
   var data = activepoint._chart.data;
   var datasetindex = activepoint._datasetindex;
   var label = data.datasets[datasetindex].label;
   var value = data.datasets[datasetindex].data[activepoint._index];
   console.log(label, value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="createcurryearhccgapchart" height="170"></canvas>

score:0

in the new version of chart.js, the below code would work.

const ctx = $('#monitor');
monitorchart = new chart(ctx, config);

ctx.on('click', function(evt) {
  const points = monitorchart.getelementsateventformode(evt, 'nearest', { intersect: true }, true);

  if (points.length) {
    const firstpoint = points[0];
    const label = monitorchart.data.labels[firstpoint.index];
    const slabel = monitorchart.data.datasets[firstpoint.datasetindex].label;
    const value = monitorchart.data.datasets[firstpoint.datasetindex].data[firstpoint.index];
    console.log(label, slabel, value);
  }
});

you can check here!


Related Query

More Query from same tag