Can you persist the tooltip and how to handle the state to use it outside the chart ?

[Acarvajal904]

Question

So I have a chart and I need to click the chart to create the tooltip but I need the tooltip to stay in the chart, is there a way to do it ?

The other question is related to how to handle the state outside the chart
I need to use the selected X and Y outside the component, how can I do it?

Thanks

[owattenmaker]

You can be a little more creative with it. You can call the useChartPressedState anywhere and pass it into a child component of yours.

Then you can use an effect to enable another state to check the active flag, and hide it whenever you want:

const { state, isActive } = useChartPressedState(DEFAULT_STATE)
const [showToolTip, setShowToolTip] = useState(false)

useEffect(() => {
  if (isActive) {
    setShowToolTip(true)
  }
}, [isActive])

return (
  <View>
    <MyChart chartPressedState={state} showToolTip={showToolTip} />
    <Button onPress={() => setShowToolTip(false)}>Hide Tooltip</Button>
  </View>
)

[Acarvajal904]

@owattenmaker Thank you that's very helpful, any ideas about handling the state outside the chart ?

[owattenmaker]

@Acarvajal904 I'm not quite sure what you mean by that. In my example it already has the chart pressed state outside of the chart component.

If you're talking about reading the shared values from state, then yes it's possible, it's just a react-native-reanimated SharedValue (https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/shared-values/ & https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/)

Hopefully that helps