title: Getting X, Y Axes Values on Hovering the Line in React-Wrapped Chartjs 2
body: <p>I am trying to replicate the following code in react-chartjs-2:</p>
  
  <pre><code>var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 20, 81, 56, 55, 40],
    }]
  };
  var option = {
    legend: false,
    title: {
      display: true,
    },
    onHover: function(evt) {
      var item = myLineChart.getElementAtEvent(evt);
      if (item.length) {
          console.log("onHover",item, evt.type);
        console.log("&gt;data", item[0]._index, data.datasets[0].data[item[0]._index]);
      }
    }
  };
  
  var myLineChart = Chart.Line('myChart', {
    data: data,
    options: option
  });
  </code></pre>
  
  <p>I tried adding <code>onHover</code> function in <strong>options</strong> object and getting myLineChart instance as follows:</p>
  
  <pre><code>const lineChartInst = {}
  
  class MyChart extends React.Component {
  
  render() {
  
   const chartOptions = {
      onHover: e =&gt; {
          const item = lineChartInst.getElementAtEvent(e)
          if(item.length) {
            const x = chartData.datasets[0].data[item[0]._index].x,
                  y = chartData.datasets[0].data[item[0]._index].y
            this.props.setXYInfo(x, y)
          }
        }
   }
  
   return (
    &lt;Line
      ...
      options={chartOptions}
      ref={reference =&gt; lineChartInst = reference}
    /&gt;
    )
   }
  
  }
  </code></pre>
  
  <p>But I get an error saying getElementAtEvent is not a function.</p>
  
  <p>Any idea how can I make it work?</p>