React-native-svg-charts: AreaChart + tooltip

[obsidianart]

What is the problem?

I can't make onPress working on AreaChart, I would like to show a popup with additional information when pressed
(Ideally i would like to be onMove but I don't see the possibility in the library)

What platform?

Running natively on the ios simulator, no expo

• [latest on xr] iOS
• [ ] Android

React Native version: 0.57.6

Code to reproduce

Please notice all onPress are commented out but neither was working

  render () {
    const points = [1,4,21,3,7,100, 50, 20, 1,3,5,6,76,33,46,88]

    const Gradient = () => (
      <Defs key={'gradient'}>
        <LinearGradient id={'gradient'} x1={'0'} y={'100%'} x2={'0'} y2={'50%'}>
          <Stop offset={'0%'} stopColor={'rgb(64, 135, 249)'} stopOpacity={0.1}/>
          <Stop offset={'100%'} stopColor={'rgb(64, 135, 249)'} stopOpacity={0.05}/>
        </LinearGradient>
      </Defs>
    )

    const indexToClipFrom = 10

    const Line = ({ line }) => (
      <Path
        key={'line'}
        d={line}
        stroke={'rgb(28, 114, 147)'}
        fill={'none'}
        // onPress={(a, b, c) => console.tron.log(a, b, c)}
      />
    )

    return (
      <AreaChart
        style={{ height: 200, width: Dimensions.get('window').width }}
        data={points}
        contentInset={{ top: 20, bottom: 20 }}
        // onPress={(a,b,c) => console.tron.log(a,b,c)}
        svg={{
          fill: 'url(#gradient)',
          // onPress: (a, b, c) => console.tron.log(a, b, c)
        }}
      >
        <Gradient />
        <Line />
        {/* <Tooltip /> */}
      </AreaChart>

[JesperLekland]

Seems related to #283. What version of react-native-svg are you using? Closing this issue as it's probably not an issue with our library (we just pass the onPress through)

[obsidianart]

@JesperLekland Can you please help on which one is the right way to pass the onPress? Is there an onMove? I understand you just pass it trough but this is more likely me not understanding the docs (or this info missing in the doc)

[JesperLekland]

I think it's a bug in react-native-svg. Try an older version of it and see if that helps

[obsidianart]

@JesperLekland I understand that, but if you actually look at my code I'm trying onPress in 3 different places, are they all correct? Also, I'm using react-native-svg 6.5.0 ...

[vrinch]

hey @obsidianart, were you able to sort this out?

[obsidianart]

@vrinch I gave up :)

[vrinch]

thanks for the prompt reply @obsidianart

[vrinch]

I figured a way out @obsidianart
let me know if you still need it

[AravindTReddy]

@vrinch Can you please share your way around. Thanks

[vrinch]

@AravindTReddy

I was able to achieve onPress and not onMove

`
import React from 'react'
import { View, Alert } from 'react-native'
import { BarChart, Grid } from 'react-native-svg-charts'
import { Text, Line, Circle, G, Rect, } from 'react-native-svg'

          const data = [ 10, 5, 25, 15, 20 ]

          class App extends React.PureComponent {

            constructor(props) {
              super(props);
              this.state = {
                selected: {},
              }
            }

            handlePress({ value, index }) {
              const selected = {
                index,
                value
              };
              this.setState({ selected, })
              //Alert.alert(index, value);
            }
              render() {
                const { selected } = this.state;

                    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}ºC` }
                          </Text>
                        <G
                          x={ 60 / 2 }
                        >
                          <Line
                          y1={ 60 / 2 }
                          y2={ y(31) }
                          stroke={ 'grey' }
                          strokeWidth={ 2 }
                        />
                        </G>
                      </G>
                  )


                          const pieData = data
                      .map((value, index) => ({
                          value,
                          svg: {
                              fill: selected.value === value ? 'orange' : 'blue',
                              onPress: this.handlePress.bind(this, { index, value }),
                          },
                          key: `pie-${index}`,
                      }))


                  return (
                      <View style={{ flex: 1, justifyContent: 'center', paddingVertical: 16 }}>
                                              <BarChart
                                                  style={{ height: 300, }}
                                                  data={pieData}
                                                  yAccessor={({ item }) => item.value}
                                                  contentInset={{ top: 120, bottom: 5 }}
                                                  spacingInner={0.2}
                                              >
                                              {selected.value &&
                                                <Labels />
                                              }
                                              </BarChart>
                      </View>
                  )
              }

          }

          export default App

`