Grouped barchart tooltips

[mraka666]

How to create tooltips for grouped bar chart? I have progress to this far and clueless to proceed. Please help to enlighten. Thanks in advance

` import { XAxis, BarChart, Grid } from 'react-native-svg-charts' import { Line, Circle, G, Rect, } from 'react-native-svg'

render() {

  const { selected } = this.state;

  const data1 = [ 14, 85, 35, 53, 6, 33, 73]
        .map((value) => ({ value }))
  const data2 = [ 24, 28, 93, 77, 52, 21, 10]
        .map((value) => ({ value }))

  const Labels = ({ x, y, bandwidth, data }) => (
    <G key={ selected.index } x={ x(selected.index) } y={y(selected.value) - 80 } onPress={ () => alert('tooltip clicked') }>
      <Rect height={ 30 } width={ 60 } stroke={ 'grey' } fill={ 'white' } ry={ 10 } rx={ 10 } />
      <Text x={ 60 / 2 } dy={ 16 } alignmentBaseline={ 'middle' } textAnchor={ 'middle' } stroke={ 'rgb(134, 65, 244)' } >
        { `${selected.value}` }
      </Text>
      <G x={ 60 / 2 } >
        <Line y1={ 60 / 2 } y2={ y(31) } stroke={ 'grey' } strokeWidth={ 2 } />
      </G>
    </G>
  )

  const barData = [
      {
          data: data1,
          svg: {
              fill: 'green',
              onPress: ()=> console.log('Display value and index for data 1'),
          },
      },
      {
          data: data2,
          svg:{
            fill: 'red',
            onPress: ()=> console.log('Display value and index for data 2'),
          },     
      }
  ]

  return (){
          </View>
                    <BarChart 
                      style={{ height: 160, paddingHorizontal: 12}} 
                      data={barData} svg={{fill}} 
                       yAccessor={({ item }) => item.value}
                       spacingInner={0.4}  
                       contentInset={{ top: 30, bottom: 10 }} 
                       { ...this.props }>
                      { {selected.value && <Labels /> } }

                    </BarChart>
                    <XAxis style={{ marginHorizontal: 0 }} data={salesData}
                        formatLabel={(index) => dates[index]} contentInset={{ left: 30, right: 30 }}
                        svg={{ fontSize: 13, fill:'grey' }}
                    />  
           </View>
 }

`

[aliceInWahed]

Hi @mraka666, are u able find the way? mind to share? thanks in advance :)