I'm trying to plot a graph with Victory native that's use multi press tooltip. The problem that I'm having is that when i click it on the graph it does not show me the y axis value (which is price in my case).My datas come in this format :
{"day": "03/2024","highTmp": 253976.62}As you can see day it's a string of data to axis x and highTmp is a number to axis y.Here's how my graph looksmy graph when i click
As you see, it's show me the circle right an if i move it the circle also move
My code look's like this:
import { View,StyleSheet, Text, ActivityIndicator } from 'react-native';import { CartesianChart, Line, useChartPressState,useChartTransformState, useLinePath, useAnimatedPath, type PointsArray} from 'victory-native';import type { SharedValue } from 'react-native-reanimated';import React, {useEffect, useState} from 'react';import inter from '../../assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf';import { Circle, useFont } from '@shopify/react-native-skia';import GraphDatas from '../conections/api_graphics';import CoinButton from '../buttonCoin/buttonCoin';interface DataFetchHist{ id ?: string; price ?: number; name ?: string; data ?:number; day ?: number; highTmp ?: number; selectedItem?:string; setSelectedItem: React.Dispatch<React.SetStateAction<string>>;}const INIT_STATE = { x:0, y: { highTmp: 0 } } as const;export const Graph = ({selectedItem,setSelectedItem }:DataFetchHist ) => { const {datasHist, loading, error} = GraphDatas(); const [pricesCoin, setPrices] = useState([]); const [formattedData, setFormattedData] = useState<{ day: string; highTmp: number }[]>([]); const { state: firstPress, isActive: isFirstPressActive } = useChartPressState(INIT_STATE); const { state: secondPress, isActive: isSecondPressActive } = useChartPressState(INIT_STATE); const font = useFont(inter,12); const [finalArray, setFinalArray] = useState();...
return (<><View style={styles.coinButton}><CoinButton selectedItem={selectedItem} setSelectedItem={setSelectedItem}/></View><View style={styles.graph}> {formattedData.length > 0 ? (<CartesianChart data={formattedData} xKey="day" yKeys={['highTmp']} padding={{ left: 5, top: 90, bottom: 0, right: 5 }} domainPadding={{ left: 5, right: 0 }} chartPressState={[firstPress, secondPress]} axisOptions={{ font,labelColor:'black', lineColor:'transparent', }}> {({ points }) => (<><Line points={points.highTmp} color="#16C784" strokeWidth={3} connectMissingData={true} opacity = {4} animate={{ type: 'spring', duration: 600 }} /> {isFirstPressActive && (<ToolTip x={firstPress.x.position} y={firstPress.y.highTmp.position}/>)} {isSecondPressActive && (<ToolTip x={secondPress.x.position} y={secondPress.y.highTmp.position} />)}</> )}</CartesianChart> ) : (<View style={styles.loadingContainer}><ActivityIndicator size="large" color="#0000ff" /></View> )}</View></> );};function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) { return <Circle cx={x} cy={y} r={5} color="black" />;}const styles = StyleSheet.create({ coinButton:{ // backgroundColor:'red', width:'auto', height: 100, // alignItems:'flex-end', marginTop:10, left:130, zIndex:3, // color:'red', },graph:{ width: '100%', height: '40%', backgroundColor:'white', // backgroundColor:'#011631', display:'flex', justifyContent:'center', fontSize:10, color:'black', marginTop:-100, zIndex:0, //******************voltar para 0 ************** */ // fontStyle:'italic',},});export default Graph;I guess the problem it's happening because x axis is a string but i pass as a number, so i tried to change the tooltip to accept string in x axis but does not worked:
ToolTip({ x, y }: { x: SharedValue<string>;And if i hover the chartPressState it show's me this error :
Type 'ChartPressState<{ readonly x: 0; readonly y: { readonly highTmp: 0; }; }>' is not assignable to type 'ChartPressState<{ x: string; y: Record<"highTmp", number>; }>'. The types of 'x.value.value' are incompatible between these types. Type 'number' is not assignable to type 'string'
