Toolitips with Victory Native XL Cart

Anyone know how to support multiple lines in Victory Native XL?

I think the issue is useChartPressState supporting only a single line but have yet to find way to include y positions when there is more than line.

here is the example, is similar to the tutorial expect that there are multiple lines being drawn, I'd want a tool tip to display per line.

tried many things but the next attempt will be to replace highTmp with the generated keys from chartKeys, maybe thats the trick and victory XL will map them automagically? but a bit of a job so I just wanted to know if anyone achieved this or knows what the "right way" to achieve it is.

Thanks for reading

import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf"; // Wherever your font actually lives

function VictoryLineChart({ chartData, chartSettings, selectedTimeRangeOption }) {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  ...

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{
          font,
        }}
        chartPressState={state}
      >
 {
   ({ points }: { points: any }) => {
     return ( 
       <> 
         {
           chartKeys && chartKeys?.map((key, index) => {
             const settings = chartSettings?.settings?.points[index];
             return ( 
               <> 
                 <Line points={ points[key] } color={ settings?.color } strokeWidth={ 1 } key={ index } antiAlias={ true } /> 
                 {
                   isActive && <ToolTip
                      x={ state.x.position }
                      y={ state?.y[key]?.position || 0 }
                      color={ settings?.color || '#000' }
                   />
                 } 
               </>
              );
           })
          } 
        </>
    );
   }
 }
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y, color }: { x: number; y: number, color: string }) 
{
    const font = useFont(inter, 12);

    return (
        <>
            <Circle cx={x} cy={y} r={8} color={color} />
            <SkiaText x={x} y={y} text={parseFloat(y).toFixed(2).toString()} font={font} />
        </>
    );
}

Since this didn't get an answer an has been viewed/ bumped a few times, here is how I solved it. It was quite simple but undocumented.

Use a seperate iterator below the Line iterator to ensure the tooltips have a z-index than the chart lines.

{
chartKeys && chartKeys?.map((key, index) => {
        const settings = chartSettings[index];

        if(!isActive)
        {
            return
        }

        return (
            <ToolTip
                key={`tooltip-${index}`}
                x={x.position} 
                y={y[key]?.position || 0}
                value={y[key].value || 0}
                color={settings?.color || '#fff'}
                index={index}
            />
        );
    })
}