Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onPress event on circle decorator #14

Closed
Danushka50 opened this issue Dec 19, 2017 · 2 comments
Closed

onPress event on circle decorator #14

Danushka50 opened this issue Dec 19, 2017 · 2 comments

Comments

@Danushka50
Copy link

Danushka50 commented Dec 19, 2017

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
Copy link
Owner

JesperLekland commented Dec 19, 2017

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants