How to add onclick event on chart label in react-chartjs-2?

Question

I want open a dialog when clicking on chart js label. This is the dataset code:-

const data = {
datasets: [
  {
    label: 'Reviews',
    backgroundColor: theme.palette.primary.main,
    data: dataProp.reviews,
    barThickness: 12,
    maxBarThickness: 10,
    barPercentage: 0.5,
    categoryPercentage: 0.5
  },
  {
    label: 'Talents',
    backgroundColor: theme.palette.secondary.main,
    data: dataProp.talents,
    barThickness: 12,
    maxBarThickness: 10,
    barPercentage: 0.5,
    categoryPercentage: 0.5
  }
],
labels

};

This is the screenshot the chart created. I know how to set onclick on legend but how can i set an onClick on labels ?

I Tried this in option but it is not working and giving me error

const options = {
responsive: true,
maintainAspectRatio: false,
animation: false,
cornerRadius: 20,
legend: {
  display: false
},
layout: {
  padding: 0
},
scales: {
  xAxes: [
    {
    }
  ],
  yAxes: [
    {
      
    }
  ]
},
tooltips: {
  
},
onClick: function(evt, element) {
  if (element.length > 0) {
    console.log(element);
    // you can also get dataset of your selected element
    data.datasets[element[0]._datasetIndex].data[element[0]._index];
  }
}

};

Sanoodia · Answer 1 · 2021-01-21T09:35:44.043

2

All you need to do is just add onClick callback in graph options property

options={{
   .....
 onClick: function(evt, element) {
        if(element.length > 0) {
            console.log(element,element[0]._datasetInde)
            // you can also get dataset of your selected element
            console.log(data.datasets[element[0]._datasetIndex])
        }
}}

edited Jan 21 '21 at 09:35

answered Jan 21 '21 at 07:32

Sanoodia

830
4
9

1

I am not able to get data from datasets can you tell what i am missing here. Its need to check which label clicked i am getting length zero of element – Shashank Dubey Jan 21 '21 at 07:47
1

This onClick is working everywhere i click on chart not just label. – Shashank Dubey Jan 21 '21 at 07:55
if you are getting zero length of element then this indicate that you have not clicked on dataset element, you just clicked on chart... so you have to check if length of element is greater than 0 this means you clicked on valid chart element – Sanoodia Jan 21 '21 at 09:38
I have also updated my answer check that out – Sanoodia Jan 21 '21 at 09:39

score 1 · Answer 2 · answered May 26 '21 at 20:23

You need to get ref, and add event getElementAtEvent.

import { Bar } from 'react-chartjs-2'
import { Chart } from 'chart.js'


const BarChart = () => {
  const chartRef = useRef<HTMLCanvasElement>(null)
  ...
  return ( <Bar
    type='horizontalBar'
    data={chartData}
    ref={chartRef}
    getElementAtEvent={(i: any, event: any) => {
      if (chartRef.current) {
      const chart = Chart.getChart(chartRef.current)
      const clickedElements = chart!.getElementsAtEventForMode(event, 'y',{axis: 'x', intersect: false}, true)
      if (clickedElements.length > 0) {
        console.log(clickedElements[0].index) // Here clicked label | data index
      }
     }
    }}
    options={options}/>
  )
}

+1 for this import { Chart } from 'chart.js' which solved my stupid mistake with undefined Chart in const chart = Chart.getChart() — koubin, Feb 21 '22 at 17:50

How to add onclick event on chart label in react-chartjs-2?

2 Answers2

Linked