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>
);
};
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
}}
/>