I'm trying to insert a tooltip on point of a Victory scatter plot where I use a dataComponent to modify the format of the dots, here is the code
class CatPoint extends React.Component {
render() {
const {x, y, datum} = this.props;
const cat = datum._y >= 0 ? "" : "";
return (
<text x={x} y={y} fontSize={30}>
{cat}
</text>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryChart>
<VictoryScatter
labelComponent={<VictoryTooltip flyoutStyle={{fill: "black"}}/>}
data={[
{x: 1, y: 3, label: "Alpha"},
{x: 2, y: 4, label: "Bravo"},
{x: 3, y: 6, label: "Charlie"},
{x: 4, y: 3, label: "Delta"},
{x: 5, y: 7, label: "Echo"},
]}
dataComponent={<CatPoint/>}
/>
</VictoryChart>
);
}
}
ReactDOM.render(<App/>, mountNode);
I've tryed many things but was not able to do it.
I found the solution on this link