OnClick item has the incorrect datasetIndex for line graphs

Hi,

I notice that when you associate an onclick event to a line chart, the item that is returned does not contain a validate dataset index. the index for the row is correct but the col value is not and always set to 0.

    public render() {
        const options = {
            onClick: (e, item) => {
                console.log(`Item with text ${item[0]._index} and index ${item[0]._datasetIndex} clicked`);
            }
            
        };
        return (
            <div>

              <Line data={data}
                    options={options}    />
            </div>
        );
    }

How do we get the data point (x,y) where the user clicks if you don’t know what the _dataset index is. when i say x and y I refer to the actual data points and not the position

Thanks, Derek

[ahoopes16]

Hey, I don’t know if anyone is still looking for this answer but I came across a nice way to do it today.

I had a stacked line chart and I needed to get the information from the exact data point that was clicked. The charts have a prop called getElementAtEvent, to which you can pass a function that will take an array holding the single element you click on, not the array of every element in the chart like the onClick handler does.

The way I used it was like so:

LineChart Class:

import { Line } from 'react-chart-js2'

function LineChart(props) {
   return (
      <div className="line-chart">
         <Line
             getElementAtEvent={props.handleChartClick}
             ...
          />
      </div>
   )
}

export default LineChart

Parent Class:

import LineChart from './LineChart'

class Parent extends Component {
   handleChartClick(element) {
      const { datasets } = element[0]._chart.tooltip._data
      const datasetIndex = element[0]._datasetIndex
      const dataIndex = element[0]._index

      alert(`${datasets[datasetIndex].label}: ${datasets[datasetIndex].data[dataIndex]}`) 
   }

   render() {
      return (
         <LineChart
            handleChartClick={element => this.handleChartClick(element)}
            ...
         />
      )
   }
}

This will alert the associated label and the value of the data point that you click on in the chart, even with stacked line/bar charts. Then you can do whatever you want with that information!

Hope this helps!

DISCLAIMER: It definitely doesn’t have to be organized this way, I just extracted this from my project because I know for a fact it works just like this. You could totally put the handleChartClick(element) directly inside wherever you import the Line class from react-chart-js2.

[austinderek]

Need to grab the index in my dataset to link to specific URLs… Anyone solve this click event dilemma?