React-native-svg-charts: Line chart with multiple series

[holtc]

What is the problem?

Layered charts do not work, we need a native multi-line chart that can allow multiple lines to be on the same Y scale.

When does it happen?

If one set of data is a multiple of another set of data. They show as overlapping lines, which is not correct. It is also very difficult to get this to work when adding in X and Y axes

Code to reproduce

<View style={{ height: 200 }}>
  <LineChart
    style={{ flex: 1 }}
    data={[1,2,3,4,5]}>
    <Grid />
  </LineChart>
  <LineChart
    style={StyleSheet.absoluteFill}
    data={[2,4,6,8,10]}>
  </LineChart>
</View>

[avinashtadavarthy]

@holtc
check out #205. They have included the functionality to draw multiple line charts with one LineChart component itself. The problem is that this change hasn't been pushed to npm for some odd reason.

What I did for a work-around is that:

• I copied the files from the src folder on this git repo called as 'line-chart' and 'chart' and pasted it in the src folder in my node-modules/react-native-svg-charts/
• rebuilt the project
• and implemented the code as mentioned in https://github.com/JesperLekland/react-native-svg-charts/pull/206/commits/8845f1d560a78f9651d898a52b09233f53443a21#diff-9b27b3b9470cc83cef4102c73caec23f

Works for me!

[eliecharra]

@holtc IMHO you should configure your package.json to target latest commit instead of dupplicating sources in your project. No proper release on npm is never a real issue.

[JesperLekland]

I'll try to get a release going ASAP ⚡️

[theRadFad]

I found a way to make this work. The trick is to give the charts the same y-bounds (yMin and yMax) and so they will use the same scale. Also use the same min-max on the YAxis to adjust the ticks