CODEWITHSUNDEEP
react-native
Swapnil Hadge
Swapnil Hadge

Reputation: 57

How to create a multiline chart in react native?

I am trying to create a multiline chart in simple react native mobile application. I tried various libraries but the multiline chart is not working. I am new to this. Please help.

Upvotes: 1

Views: 5413

Answers (1)

Suraj Singh
Suraj Singh

Reputation: 56

you can use "react-native-char-kit" just by providing multiple datasets, you can implement a multiline chart.

<LineChart
    bezier
    withHorizontalLabels={false}
    withVerticalLabels={false}
    data={{
        labels: [' jan', ' feb', ' mar', ' apr', ' june', ' july'],
        datasets: [
                            
                    {
                                data: [10, -4, 6, -8, 80, 20],
                                strokeWidth: 2,
                    },
                    {
                                data: [5,8,6,9,8,2,-2],
                                strokeWidth: 2,
                    },
                ],
        legend: ['car', 'bike'],
        }}
        width={Dimensions.get('window').width - 16}
        height={200}
        chartConfig={{
                        backgroundColor: '#1cc910',
                        backgroundGradientFrom: '#eff3ff',
                        backgroundGradientTo: '#efefef',
                        decimalPlaces: 2,
                        color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                        style: {
                            borderRadius: 16,
                        },
                    }}
        style={{
                borderRadius: 16,
            }}
                />

Upvotes: 4

Related Questions