7

I am trying to put multiple line charts showing different data in one graph but am unable to do so in react-native using react-native-svg-charts. 

<View style= {{height: 200}}>
      <LineChart 
        style={{ flex:1 }}
                data={this.state.data}
                svg={{ stroke: 'rgb(134, 65, 244)' }}
                contentInset={{ top: 20, bottom: 20 }}
            >
            <Grid/>
      </LineChart>
      <LineChart 
        style={{position: 'absolute'}}
                data={this.state.data1}
                svg={{ stroke: 'rgb(168, 155, 50)' }}
                contentInset={{ top: 20, bottom: 20 }}
            >
            <Grid/>
      </LineChart>
      </View>

The above code was what I was trying but am unable to get the correct design as I get only the first data's line chart.

Thanks!

xyz6675
  • 355
  • 2
  • 6
  • 17

1 Answers1

15
render() {

    const data1 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
    const data2 = [ -87, 66, -69, 92, -40, -61, 16, 62, 20, -93, -54, 47, -89, -44, 18 ]

    const data = [
        {
            data: data1,
            svg: { stroke: '#8800cc' },
        },
        {
            data: data2,
            svg: { stroke: 'green' },
        },
    ]

    return (
        <LineChart
            style={{ height: 200 }}
            data={ data }
            contentInset={{ top: 20, bottom: 20 }}
        >
            <Grid />
        </LineChart>
    )
}
Saman Kumara
  • 151
  • 2
  • 1
    Welcome to Stackoverflow. Please explain your answer so others can understand easily. – octobus Dec 06 '19 at 06:49
  • 1
    This answer works. I'm wondering why it's not documented in the library. – João Paulo Motta Feb 27 '20 at 14:51
  • Thanks a lot for this, I'll PR the docs, this is an incredibly important feature that *should* be documented. – Maen Mar 05 '20 at 11:50
  • I've submitted [a pull request](https://github.com/JesperLekland/react-native-svg-charts-examples/pull/15), thanks again! – Maen Mar 05 '20 at 15:05
  • Correction: this behavior [**is documented**](https://github.com/JesperLekland/react-native-svg-charts#props-2): *It can however also be an array with several data sets.* - and [here's a snack to play with](https://snack.expo.io/SJdQf9A4U) – Maen Mar 05 '20 at 15:13