React ChartJS 2 : Get data on clicking the chart

Question

I found many other questions on StackOverflow as well as GitHub but none of them worked for me...

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 getElementsAtEvent and onElementsClick. These props when used gives tons of data except the value of the bar that I just clicked into.

This is how I import the component

import { Bar } from "react-chartjs-2";

This is how I use the component

<Bar
  data={barData}
  height={275}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

And the variable barData is as follows:

const barData = {
  labels: [
    "04-07-2020",
    "05-07-2020",
    "06-07-2020",
    "07-07-2020",
    "08-07-2020",
    "09-07-2020",
    "10-07-2020",
  ],

  datasets: [
    {
      label: "Cases",
      borderWidth: 1,
      backgroundColor: "#ffc299",
      borderColor: "#cc5200",
      hoverBackgroundColor: "#ed873e",
      hoverBorderColor: "#e35f00",
      data: [673165, 697413, 719664, 742417, 767296, 793802, 820916],
    },
    {
      label: "Recovered",
      borderWidth: 1,
      backgroundColor: "#b3ffb3",
      borderColor: "#00ff00",
      hoverBackgroundColor: "#55cf72",
      hoverBorderColor: "#2c9c46",
      data: [409083, 424433, 439934, 456831, 476378, 495513, 515386],
    },
    {
      label: "Deaths",
      borderWidth: 1,
      backgroundColor: "#de8078",
      borderColor: "#fa6457",
      hoverBackgroundColor: "#d73627",
      hoverBorderColor: "#ff4636",
      data: [19268, 19693, 20159, 20642, 21129, 21604, 22123],
    },
  ],
};

This is the graph

Any help is appreciated

Answer 1

Since your data is structured in a certain way, when a bar is clicked, an array of size 3 is returned as elem. You can extract the data from there based on your requirement.

Using onElementsClick:

<Bar
  data={barData}
  height={275}
  onElementsClick={elem => {
    var data = barData.datasets[elem[0]._datasetIndex].data;
    console.log("Cases", data[elem[0]._index]);

    data = barData.datasets[elem[1]._datasetIndex].data;
    console.log("Recovered", data[elem[1]._index]);

    data = barData.datasets[elem[2]._datasetIndex].data;
    console.log("Deaths", data[elem[2]._index]);
  }}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

elem is populated with the clicked element. You might need to tweak this code a bit to achieve exactly what you're looking for depending on what you want to do with that data. Sandbox in comment.