Overlay in a LineChart - get the exact y position when using a double

I’m displaying a LineChart with curve type set to curveMonotoneX inside a ScrollView, I want to animate an overlay when the user is scrolling the ScrollView, I’m calculating the percentage of an item, then I send the double value to the x function.

E.g. index 14 becomes 14.23, when I send it to the x function I get the exact position within the chart.

This works fine, but whenever I send in the double to the y function I get some weird return value, does the y function support doubles?

As you can see in the screenshot the overlay is misplaced, for some reason it has the wrong y position, (see the yellow arrow), it should actually be located where the green arrow is pointing.

Here’s the code I’m using

    private readonly Tooltip = ({ x, y }) => {
        const { indexOfActiveDataPoint } = this.state; /* e.g 14.23 */

        const xA = x(indexOfActiveDataPoint) - (75 / 2);
        const yA = y(this.state.data[Math.floor(indexOfActiveDataPoint)].current ? this.state.data[Math.floor(indexOfActiveDataPoint)].current._value : this.state.data[Math.floor(indexOfActiveDataPoint)]);

        console.log(xA, yA);

        return (
            <G
                x={xA}
                key={"tooltip"}
            >
                <G x={75 / 2}>
                    <Circle
                        onPressOut={() => console.log("tooltip clicked")}
                        cy={yA}
                        r={5}
                        strokeWidth={1}
                        fill={"rgba(255,255,255,0.5)"}
                    />
                </G>
            </G>
        );
    }

[JesperLekland]

Also in order to correctly troubleshoot I need a complete, small example. This example provides me with very little to go on (code wise). Great screenshot though

[usrbowe]

Closing due:

• stale
• no activity