React-native-svg-charts: onPress event on circle decorator

[Danushka50]

Hi,

Need a event on circle click, that has to show tool tip on circle click dynamically.
Please help to do that

Like this

<View style={styles.chartScroll}>
        <AreaChart
          style={this.chartStyle()}
          dataPoints={this.dataGraph()}
          fillColor={colorsGraph.chartFill}
          strokeColor={colors.secondaryColor1}
          contentInset={{top: 50, bottom: 30, left: 50, right: 50 }}
          extras={[Tooltip]}
          renderExtra={({ item, ...args }) => item(args)}
          showGrid={false}
          gridMax={150}
          //spacing = {100}
          renderDecorator={({ x, y, index, value }) => (
            <G>
              <Circle
                key={index}
                cx={x(index)}
                cy={y(value)}
                r={4}
                //stroke={ 'rgb(134, 65, 244)' }
                fill={colors.secondaryColor1}
                onPress={() => this.someFunction()}////////////////////////////////////////// this is the function
/////then have to show tool tip in each circle click and have to show the value

              />
              <Line
                x1={x(index)}
                y1={"250"}
                x2={x(index)}
                y2={"70"}
                stroke={colorsGraph.chartVerticalGrid}
                strokeWidth="0.3"
              />
            </G>
          )}
        />
        <XAxis
          style={{ paddingVertical: 0 }}
          values={this.dataGraph()}
          formatLabel={value => `${value}`}
          chartType={XAxis.Type.BAR}
          labelStyle={{color:'black'}}
          contentInset={{ left: 20, right: 20 }}
        />
      </View>

is there way to do that....Please help....

[JesperLekland]

According to the provided code the onPress on <Circle/>should be called. Once this is done you should set a state that tells the AreaChart to render its extras, e.g

...
this.state = { extras: [] }
...
<AreaChart
  extras={this.state.extras}
>
...
onPress={() => this.setState({extras: [ToolTip]}}

For future reference this is more of a stackoverflow question

[Danushka50]

Hi,
That's what i need... Thank you very much.