Гиперссылка на барах в Chart JS в React

Question

Я использую диаграмму js -2 в функциональном компоненте реакции (код можно найти здесь: https://codesandbox.io/s/elastic-brook-okkce?file= / src / Dashboard.jsx )

Я визуализировал здесь 4 столбца и хочу, чтобы функция-обработчик c была определена для события onClick на каждом столбце. Например, в ярлыках полос есть 4 типа, и при нажатии на каждую полосу я хочу отобразить что-то, c специфичное для типа щелчка панели. Как это реализовать?

function Dashboard(props) {
  const classes = useStyles();
  const [data, setdata] = React.useState({
    labels: ["type1", "type2", "type3", "type4"],
    datasets: [
      {
        label: "text that comes on hover", 
        backgroundColor: [
          //................................................colors of the bars............
          "#3e95cd",
          "#8e5ea2",
          "#3cba9f",
          "#e8c3b9",
          "#c45850"
        ],
        barThickness: 80,
        data: [50, 100, 75, 20, 0] //......................values for each bar...........
      }
    ]
  });

  const getChartData = canvas => {
    return data;
  };
  return (
    <React.Fragment>
      <div
        className={classes.chart}
        style={{ position: "relative", width: 900, height: 450 }}
      >
        <Bar
          options={{
            responsive: true,
            maintainAspectRatio: true,
            legend: { display: false },
            title: {
              display: true,
              text: "Title for the graph"
            }
          }}
          data={getChartData}
        />
      </div>
    </React.Fragment>
  );
}

export default Dashboard;

Answer 1

Вы можете использовать onElementsClick. Пожалуйста, проверьте код ниже:

<Bar
    options={{
        responsive: true,
        maintainAspectRatio: true,
        legend: {display: false},
        title: {
            display: true,
            text: "Title for the graph"
        }
    }}
    onElementsClick={(e) => {
        console.log(e, 'e')
    }}
    data={getChartData}
/>