Search code examples
reactjsreact-nativevictory-chartsvictory-native

Victory Native Pie tooltip to remain active


Kindly help me with the Victory Native Config or for the below requirement:

The tooltip for Victory Pie should be active and remain active even after press out for the sector pressed. Also, all other tooltips for various pie sectors should close, only the one pressed recently should be active.

If this cannot be handled by Victory-Native out of the box, please guide me on how to do it otherwise.


Solution

  • This pretty much works for the requirement: Note eventKey='all' in onPressIn to first to deactivate all the tooltips (label component should be tooltip) and then activate the required tooltip in onPressOut

      <VictoryPie 
        ...     
        labelComponent = {<VictoryToolTip/>}
        events={[
                  {
                    target: 'data',
                    eventHandlers: {
                      onPressIn: ({nativeEvent}) => {
                        return [
                          {
                            // Add an event to reset all the points to the original color
                            target: 'labels',
                            eventKey: 'all',
                            mutation: () => ({active: false}),
                          },
                        ];
                      },
                      onPressOut: ({nativeEvent}) => {
                        return [
                          {
                            target: 'labels',
                            mutation: () => ({active: true}),
                           }
                        ];
                      },
                    },
                  },
                ]}
        />