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

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?

Shabuktagin Photon Khan · Answer 1 · 2022-12-23T08:19:22.413

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.

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

1 Answers1