How to add a vertical line on Victory Native when hover on Linechart with tooltip in React native?

Question

I Want result like this on hover getting vertical line with tooltip

but I'm not able to add tooltip of data

here is my result below

how can I achieve desire result, I'm looking for when I hover on chart so it should show line with toolttip of data which I provide to linechart?

Here is my code

import React, {useState} from 'react';
import {
  VictoryChart,
  VictoryCursorContainer,
  VictoryLine,
} from 'victory-native';


const TestComp = () => {
  const [hoverData, setHoverData] = useState(null);

  const handleCursorChange = (points, props) => {
    console.log(props.cursorValue);
    if (points && points.length > 0) {
      const {x} = points[0];
      setHoverData(x);
    } else {
      setHoverData(null);
    }
  };
  return (
    <View style={styles.container}>
      <VictoryChart
        domain={{x: [0, 10], y: [0, 10]}}
        containerComponent={
          <VictoryCursorContainer
            cursorDimension="x"
            cursorLabel={hoverData ? hoverData : ''}
            onCursorChange={handleCursorChange}
          />
        }>
        <VictoryLine
          data={[
            {x: 1, y: 2},
            {x: 2, y: 3},
            {x: 3, y: 5},
            {x: 4, y: 4},
            {x: 5, y: 7},
            {x: 6, y: 6},
            {x: 7, y: 8},
            {x: 8, y: 7},
            {x: 9, y: 9},
            {x: 10, y: 8},
          ]}
        />
      </VictoryChart>
    </View>
  );
};

export default TestComp;

Answer 1

You can use VictoryCursorContainer to draw the vertical line.

<VictoryChart
  domain={{ x: [0, 10], y: [0, 10] }}
  containerComponent={
    <VictoryCursorContainer
      cursorDimension="x"
      cursorLabel={({ datum }) => datum.x}
      cursorLabelComponent={<VictoryLabel y={50} />}
    />
  }>
  <VictoryLine
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
      { x: 6, y: 6 },
      { x: 7, y: 8 },
      { x: 8, y: 7 },
      { x: 9, y: 9 },
      { x: 10, y: 8 },
    ]}
  />
</VictoryChart>

There's also an issue on github may relate to your question.

Answer 2

I achieved this by creating a custom container like so:

const VictoryCursorVoronoiContainer = createContainer('cursor', 'voronoi')

The reason why I needed both is because the cursorContainer shows a line but is not based on the data points. The voronoiContainer is based on the data points. So I had the line from the cursorContainer moving across as your finger moves but only showing tooltips from the voronoiContainer once your finger is reaching a data point.

To achieve the dot on the data point that is hovered: My labelComponent of my container was a tooltip with a customFlyoutComponent. This customFlyoutComponent was an svg circle. I set a labelComponent on the tootip to display the x and y data.

Hope this helps you.