Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://react-chartjs-2.js.org/docs/working-with-events below:

Working with events | react-chartjs-2

There are three helper methods to get data from click event.

Gets dataset from mouse click event.

import { useRef } from 'react';
import { Bar, getDatasetAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getDatasetAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}

Gets single dataset element from mouse click event.

import { useRef } from 'react';
import { Bar, getElementAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}

Gets all dataset elements from mouse click event.

import { useRef } from 'react';
import { Bar, getElementsAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementsAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}

See the full working example.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4