Victory.js get x,y data from hovered line point - victory-charts

Question

How can I get the x,y data of a point on hover in a victory line component?
I tried this:
<VictoryLine
data={data}
style={{ data: { stroke: Colors.green } }}
events={[
{
target: 'parent',
eventHandlers: {
onMouseOver: () => {
return [
{
target: 'data',
mutation: (props) => {
// props.data returns the values of all data points
},
},
]
}
},
},
]}
/>
Is there a possible way to do this in victory.js?

Answer 1

Separating the different components of a victory chart
No
Component
Purpose
1
VictoryChart
It is a wrapper components, it is good to use to share events
2
VictoryVoronoiContainer
It is useful for hover interactions like tooltip
3
VictoryTooltip
It is used for tooltip
4
VictoryAxis
It is used for the axis, tickLabels
5
VictoryLine
It is used for single line path
Dummy Data
const data = [
{
each: "2022-12-19",
total: 1
},
{
each: "2022-12-20",
total: 15
},
{
each: "2022-12-21",
total: 8
},
{
each: "2022-12-22",
total: 21
},
{
each: "2022-12-23",
total: 3
}
];
Code
<VictoryChart
domainPadding={20}
height={300}
containerComponent={
<VictoryVoronoiContainer
voronoiDimension="x"
labels={({ datum }) =>
`x: ${datum.each}, y: ${datum.total}`
}
labelComponent={
<VictoryTooltip
cornerRadius={0}
flyoutStyle={{
fill: "white",
stroke: "blue"
}}
/>
}
/>
}
>
<VictoryLine
width={10}
data={data}
style={{
labels: {
fill: "blue"
},
data: {
stroke: "blue",
strokeWidth: 4
}
}}
labels={({ datum }) => datum.y}
x={"each"}
y={"total"}
height={250}
/>
<VictoryAxis
tickFormat={(x) => x}
style={{
tickLabels: { fill: "transparent" },
axis: { stroke: "transparent" },
ticks: { stroke: "transparent" }
}}
/>
<VictoryAxis
dependentAxis
style={{
tickLabels: { fill: "transparent" },
axis: { stroke: "transparent" },
ticks: { stroke: "transparent" }
}}
/>
</VictoryChart>
Explanation
To get the x,y data on a point, you need a tooltip
Use the VictoryChart and add VictoryVoronoiContainer
VictoryVoronoiContainer
No
Props
What it does
1
label
To show the label data from your data point
2
labelComponent
Use VictoryTooltip to gain more control
VictoryTooltip
No
Props
What it does
1
flyoutStyle
Use stroke to change border color, fill -> background color
VictoryAxis
This is just used to change the color of the axis and the ticks.
Hopefully this was clear.
This method works very well for tooltip situations
events can be used to show tooltip. However this only works victory bars and some others but not victory line.