Touch events on multiple line charts

[alburdette619]

What is the problem?

Currently the only way to overlay multiple lines is to follow the layered charts story and overlay them. The works and displays all data, but doesn't allow for touch events on children beyond the top most chart.

When does it happen?

Follow the decorator story, add onPress to each Circle, and add multiple line charts with the decorator child.

What platform?

• [x] iOS
• [x] Android

React Native version: 0.55.4

Code to reproduce

Object.keys(displayTypes).map((type, index) => {
      const lineData = this.getGraphData(normalizedData, type);
      const isFirst = index === 0;

      return (
        <LineChart
          key={type}
          style={isFirst ? { flex: 1 } : StyleSheet.absoluteFill}
          data={lineData}
          svg={{ stroke: lineColor, strokeWidth: 3 }}>
          {isFirst ? <Grid /> : null}
          <LinePoints
            color={lineColor}
            onPress={this.onLinePointPress}
            allData={data}
          />
        </LineChart>
      );
    });

[alburdette619]

Handling this one too...

[angelos3lex]

@alburdette619 did you find any solution to this?

[ido-sa]

i had the same issue ended up putting another transparent layer on top of all other layers, that placed all points from all charts. then, when positioned directly above the visible point, it responded to touches.

[alburdette619]

Sorry to not reply @angelos3lex I put in #240 that adds support for a stacked line chart that address this. To make my specific child touchables bigger however I did much of what @ido-kang did. The points on my graph are now decorational only and there are transparent squares above all of them with touch events.

[luki06]

Hi ,Sorry am new to react native i try to use your example to create multiple line but no luck my app keep crashing,is there a solution for that,thanks.