CODEWITHSUNDEEP
javascriptchart.js
Yige Song
Yige Song

Reputation: 373

How can I get the active label element on click in ChartJS?

I have created a pie chart using ChartJS.

Now I want to create a click handler in which I can get the label and value of the part of the chart that I have created. How do I achieve that?

let my_chart = new Chart('tot_pop_chart', {
    type: 'pie',
    data: {
      labels: ['NSW', 'VIC', 'QSD', 'SA', 'WA', 'TAS', 'NT', 'ACT'],
      datasets: [{
          data: [1, 2, 3, 4, 5, 6, 7, 8],
          backgroundColor: ['rgba(63, 75, 59, 1)', 'rgba(242, 246, 208, 1)', 'rgba(197, 123, 87, 1)', 'rgba(118, 159, 182, 1)', 'rgba(58, 110, 165, 1)', 'rgba(88, 12, 31, 1)', 'rgba(157, 172, 255, 1)', 'rgba(122, 48, 108, 1)']
        }

      ]
    },
    options: {
      animation: {},
      plugins: {
        legend: {
          display: true,
          position: 'bottom'
        }
      },
      onClick: ... //see below
    }
  }

);

My current attempt is below:

onClick:
  e => {
    console.log("In click", e.chart);

    // find the index of the clicked item
    let canvasPosition = Chart.helpers.getRelativePosition(e, e.chart);
    let index = e.chart.scales.x.getValueForPixel(canvasPosition.x);

    // now I want to retrieve the label/data using the index, how to?
  }

However, the error occurs as TypeError: Cannot read property 'getValueForPixel' of undefined. Also, how do I retrieve the label/data using the index in the onClick function?

Thanks a lot for your help!

Upvotes: 5

Views: 12004

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31411

The pie/doughnut charts don't use a scale so you can't use getValueForPixel. Instead you can just listen to the second argument which contains an array with all the active elements which for the default interaction mode only contains 1 item:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    onClick: (e, activeEls) => {
      let datasetIndex = activeEls[0].datasetIndex;
      let dataIndex = activeEls[0].index;
      let datasetLabel = e.chart.data.datasets[datasetIndex].label;
      let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
      let label = e.chart.data.labels[dataIndex];
      console.log("In click", datasetLabel, label, value);
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Upvotes: 20

Related Questions