[Chartjs]-ChartJs how to get from mulitiple dateset which dataset bar is clicked

by

8👍

✅

You can use getElementAtEvent() method to get only one dataset returned. Then you can apply further logic to detect which bar is clicked on.

ᴅᴇᴍᴏ

var barChartData = {
   labels: ["Jan", "Feb", "March"],
   datasets: [{
      label: "Quoted",
      backgroundColor: "#FF7228",
      data: [50, 20, 70],
   }, {
      label: "Accepted",
      backgroundColor: "#FFCC8C",
      data: [30, 10, 20],
   }]
};

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
   type: 'bar',
   data: barChartData,
   options: {
      onClick: function(e) {
         var bar = this.getElementAtEvent(e)[0];
         var index = bar._index;
         var datasetIndex = bar._datasetIndex;

         // check which bar is clicked
         if (index == 0 && datasetIndex == 0) alert('First BAR Clicked!');
         else if (index == 0 && datasetIndex == 1) alert('Second BAR Clicked!');
         else if (index == 1 && datasetIndex == 0) alert('Third BAR Clicked!');
         else if (index == 1 && datasetIndex == 1) alert('Fourth BAR Clicked!');
         else if (index == 2 && datasetIndex == 0) alert('Fifth BAR Clicked!');
         else if (index == 2 && datasetIndex == 1) alert('Sixth BAR Clicked!');
      }
   },
   responsive: true,
   legend: {
      position: 'top',
   },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

3👍

Updated answer for Chart.js 3.7

Use chart.getElementsAtEventForMode(evt, ...). See documentation.

const barChartData = {
  labels: ["Jan", "Feb", "March"],
  datasets: [{
    label: "Quoted",
    backgroundColor: "#FF7228",
    data: [50, 20, 70],
  }, {
    label: "Accepted",
    backgroundColor: "#FFCC8C",
    data: [30, 10, 20],
  }]
};

const ctx = document.getElementById("canvas").getContext("2d");
const chart = new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: {
    onClick: function (evt, elements, chart) {
      const bars = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
      if (bars.length === 0) return; // no bars
      
      const bar = bars[0];
      
      // Get index and label text
      const index = bar.index;
      const label = chart.data.labels[index];
      
      // Get clicked bar dataset index
      const datasetIndex = bar.datasetIndex;
      const isQuotedBar = datasetIndex === 0; // 0 is the first dataset ("Quoted")

      alert(`${isQuotedBar ? 'Quoted' : 'Accepted'} bar was clicked, for ${label}.`);
    }
  },
  responsive: true,
  legend: {
    position: 'top',
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="canvas"></canvas>

1👍

Building on Grunt’s answer more, if you want to know the underlying data, so consider mine only the onclick code:

var barChartData = {
    labels: ["Jan", "Feb", "March"],
    datasets: [{
        label: "Quoted",
        backgroundColor: "#FF7228",
        data: [50, 20, 70],
    }, {
        label: "Accepted",
        backgroundColor: "#FFCC8C",
        data: [30, 10, 20],
    }]
};

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        onClick: function(e) {
            var bar = this.getElementAtEvent(e)[0];
            if (bar != undefined) {
                var index = bar._index;
                var datasetIndex = bar._datasetIndex;
                alert(barChartData.datasets[datasetIndex].data[index].x +
                    ', ' + barChartData.datasets[datasetIndex].data[index].y);
            }
        }
    },
    responsive: true,
    legend: {
        position: 'top',
    },
});

Leave a comment