javascriptreactjschartsreact-vis

How do I get the event from onValueMouseOver in react-vis?


According to the react-vis doc, onValueMouseOver should return both the event and the datapoint. However, the event does not seem to be passed. Am I doing something wrong?

const Charts = () => {
  const data = [
    { x: 1, y: 1 },
    { x: 2, y: 1 },
    { x: 3, y: 5 },
    { x: 4, y: 5 },
    { x: 5, y: 1 },
  ];

  return (
    <XYPlot height={400} width={400}>
      <VerticalBarSeries
        data={data}
        onValueMouseOver={(datapoint, event) => {
          console.log(event.target); // undefined
        }}
      />
    </XYPlot>
  );
};

Solution

  • Actually the event parameter has an event property that you can use and access the actual event.

    You either do it like this:

    <VerticalBarSeries
      data={data}
      onValueMouseOver={(datapoint, event) => {
        console.log(event.event.target); // Some SVG element
      }}
    />
    

    or using destructuring:

    <VerticalBarSeries
      data={data}
      onValueMouseOver={(datapoint, { event }) => {
        console.log(event.target); // Some SVG element
      }}
    />