title: React ChartJS 2 : Get data on clicking the chart
body: <p>I found many other questions on StackOverflow as well as GitHub but none of them worked for me...</p>
  <p>I have a graph built using ChartJS. When I click on any of the bars(orange, green or red) I want to get the corresponding value. Is there any way to achieve this?
  The npm package I am using is react-chartjs-2.
  It has 2 props that I found may be helpful but don't know how to use it in this case. They are <strong>getElementsAtEvent</strong> and <strong>onElementsClick</strong>. These props when used gives tons of data except the value of the bar that I just clicked into.</p>
  <p>This is how I import the component</p>
  <p><code>import { Bar } from &quot;react-chartjs-2&quot;;</code></p>
  <p>This is how I use the component</p>
  <pre><code>&lt;Bar
    data={barData}
    height={275}
    options={{
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    }}
  /&gt;;
  </code></pre>
  <p>And the variable barData is as follows:</p>
  <pre><code>const barData = {
    labels: [
      &quot;04-07-2020&quot;,
      &quot;05-07-2020&quot;,
      &quot;06-07-2020&quot;,
      &quot;07-07-2020&quot;,
      &quot;08-07-2020&quot;,
      &quot;09-07-2020&quot;,
      &quot;10-07-2020&quot;,
    ],
  
    datasets: [
      {
        label: &quot;Cases&quot;,
        borderWidth: 1,
        backgroundColor: &quot;#ffc299&quot;,
        borderColor: &quot;#cc5200&quot;,
        hoverBackgroundColor: &quot;#ed873e&quot;,
        hoverBorderColor: &quot;#e35f00&quot;,
        data: [673165, 697413, 719664, 742417, 767296, 793802, 820916],
      },
      {
        label: &quot;Recovered&quot;,
        borderWidth: 1,
        backgroundColor: &quot;#b3ffb3&quot;,
        borderColor: &quot;#00ff00&quot;,
        hoverBackgroundColor: &quot;#55cf72&quot;,
        hoverBorderColor: &quot;#2c9c46&quot;,
        data: [409083, 424433, 439934, 456831, 476378, 495513, 515386],
      },
      {
        label: &quot;Deaths&quot;,
        borderWidth: 1,
        backgroundColor: &quot;#de8078&quot;,
        borderColor: &quot;#fa6457&quot;,
        hoverBackgroundColor: &quot;#d73627&quot;,
        hoverBorderColor: &quot;#ff4636&quot;,
        data: [19268, 19693, 20159, 20642, 21129, 21604, 22123],
      },
    ],
  };
  
  </code></pre>
  <p>This is the graph</p>
  <p><a href="https://i.stack.imgur.com/xRA3D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRA3D.png" alt="enter image description here" /></a></p>
  <p>Any help is appreciated</p>