CODEWITHSUNDEEP
javascriptreactjschartsreact-chartjs
Shashank Dubey
Shashank Dubey

Reputation: 353

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

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 ?

enter image description here

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

};

Upvotes: 1

Views: 9260

Answers (2)

Marat Tynarbekov
Marat Tynarbekov

Reputation: 115

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}/>
  )
}

Upvotes: 1

Sanoodia
Sanoodia

Reputation: 905

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

Upvotes: 2

Related Questions