React-native-svg-charts: Stacked Area Chart onPress get value and position for tooltip

[kashifsulaiman]

What is the problem?

For Stacked Area Chart, onPress is explicit in svgs array, not in the data. We're unable to get the values & position of the pressed item.

When does it happen?

Clicking a value in the chart.

What platform?

• [x] iOS
• [x] Android 27.0.0

React Native version: 0.55.2

Code to reproduce

     const colors = [ '#8800cc' ];
     const keys   = [ 'count' ];
     const svgs = [ { onPress: () => console.log('apples') }]
    <StackedAreaChart
                            style={ { height: 200, paddingVertical: 16 } }
                            data={ data }
                            keys={ keys }
                            colors={ colors }
                            curve={ shape.curveNatural }
                            svgs={ svgs }
                        />

[sarykemmoun]

I did something similar.
I followed this example
https://github.com/JesperLekland/react-native-svg-charts-examples/blob/master/storybook/stories/extras.js
(It's for LineChart but I used it for other charts)
And on the decorator component I rendered:

    Decorator({ x, y }) {
        return this.getPoints().map((value, index) => {
            return (
            <Circle
                key={index}
                cx={Math.min(Math.max(x(index), 7), deviceWidth - 11)} //Avoid overlap on the first and last points
                cy={y(value)}
                r={7}
                stroke='#b8c0ca' 
                fill='white'
                onPress={() => { this.setState({ chosenPoint: index }); }}
            />
        );
        }
     );
    }

[JesperLekland]

I'm not sure what the problem is, you create the svg array yourself, as such you can put whatever you want in the onPress

[kashifsulaiman]

@JesperLekland Thanks for replying, the issue is, I'm providing an array of object as data where count is the key. Now what I need is to check whether which Index or value of count is pressed. How's that possible?

[JesperLekland]

@kashifsulaiman Could you show me an example of the data?

[kashifsulaiman]

@JesperLekland Sure
[ {
"count": 1,
"key": 1532336400000
},
{
"count": 2,
"key": 1532347200000
}]

[JesperLekland]

Well then what would stop you from doing something like this?

svgs = data.map(({count}) => ({ onPress: () => count }))

[kashifsulaiman]

@JesperLekland no this doesn't fulfill the requirement.
Actually here each onPress object is for each key (Each stack), that is what I got from your example...
With your code, I'm only getting the first element's on Press event at any point I press!

[kashifsulaiman]

@JesperLekland Is there any example for this?

[JesperLekland]

What do you mean with first element? If you want to know which xIndex as well as which stack the onPress is for you're going to have to build your own decorators for the chart. Each area is built with one path and as such can't tell you where in the area it has been touched.

[kashifsulaiman]

@JesperLekland can't tell you where in the area it has been touched. this was required actually. Hopefully any work in future for this?

[JesperLekland]

As I said, you can build it yourself with decorator. But there won't be any built in support for this in the near future.

[kashifsulaiman]

@JesperLekland Could you show any example for decorator usage?

[JesperLekland]

There's a few examples in the source code. What I would do is figure out a way to render transparent rectangles on the areas you want pressable

[kashifsulaiman]

@JesperLekland It worked using Decorators! Thanks alot!

[msevestre]

Could you share your code? I'd like to add a similar feature to one of my app. Thanks

[kashifsulaiman]

@msevestre I changed my chart to AreaChart and then

 const data = [34, 53, -43, 36, 63];
 const Decorator = ({ x, y, data }) => {
        return data.map((value, index) => (
                <Circle
                    key={ index }
                    cx={ x(index) }
                    cy={ y(value) }
                    r={ 5 }
                    onPress={() => {}}
                    stroke={ 'rgb(134, 65, 244)' }
                    fill={ 'white' }
                />
        ))
    }
 <AreaChart
            style={{ height: 200 }}
            data={data}
            contentInset={{ top: 20, bottom: 20 }}
            curve={ shape.curveNatural }
        >
            <Decorator/>
        </AreaChart>

[msevestre]

@kashifsulaiman Thanks!! Cheers

[isabelleaubron]

Hi @kashifsulaiman, thanks for the code you shared. However I can't make the onPress function work on iOS, can you tell me if you were able to detect onPress event ?
It seems that there is a zIndex problem, I can't click on any Decorator inside a Chart, any help would be really appreciated !

[avinashtadavarthy]

@isabelleaubron I'm guessing this might be too late for a reply but I was recently facing the same issue and I was able to solve it by adding the zIndex style attribute to my main graph element to help detect an onPress event.

<StackedBarChart
  style={{ height: 125, zIndex: 1 }} // specified zIndex as a style attribute
  keys={keys1}
  colors={colors1}
  data={this.state.dataTop}
  spacingInner={0.2}>
        <ChartPoints type="top" /> // the decorator for my graph
  </StackedBarChart>