React-native-chart-kit: Can i use multiple lines in Line graph?

[mrfambo]

Is it possible to have multiple lines in line graph, i mean if i provide data for each line

[mrfambo]

Is there anyone to reply on this Issue ?

[Hermanya]

Yeah, Hi!
The datasets API would seem like it allows for that, but the functionality is not implemented.
There is a problem, that these charts are monochrome (everything is the same color), and it would be difficult to differentiate the multiple lines.

[mrfambo]

I tried editing datasets api too, provided it with array of more datasets but i couldn't see anything happening in it. Any solution, i need it badly though !!!

[Hermanya]

I think the only solution is to implement this functionality in the line chart, but unfortunately I don't have time to do it today.

[mrfambo]

If you check the render, it is taking datasets[0], that means it is taking the first index and ignoring others, i forked repository but couldn't run it. It is saying react-native is not in dependancies. If i know the basics of running it, i can manage to change the rendering of line graph and include mapping to go through all the datasets indexes. If you can help me up and running with this repo i will be very thankful to you.
I did following:

1. Forked it
2. Cloned It
3. Ran "yarn"
4. "yarn run ios" also "react-native run-ios"

but i couldn't manage to run it.

[mrfambo]

@Hermanya

[Hermanya]

Checkout https://github.com/indiespirit/react-native-chart-kit/blob/master/contributing.md

You need to change "main" in package json.

The react-native not being a dependency is somewhat expected. It's a peerDependency. It's required for running, but for the purpose of it being a library, o cannot set it on regular dependencies.

[mrfambo]

@Hermanya

I managed to change the code and can render the multiple lines on Charts except for Bazier lines. There is a small issue with a callback of getBezierLinePoints.

[Hermanya]

If you create a PR, I will take a look later.

[mrfambo]

Bazier line points are returning as,

M64,NaN Q 78.25, NaN, 92.5, NaN Q 106.75, NaN, 121, NaN Q 135.5, NaN, 150, NaN Q 164.5, NaN, 179, NaN Q 193.5, NaN, 208, NaN Q 222.5, NaN, 237, NaN Q 251.5, NaN, 266, NaN Q 280.5, NaN, 295, NaN Q 309.5, NaN, 324, NaN Q 338.5, NaN, 353, NaN

[mrfambo]

Sure @Hermanya

[mrfambo]

Uuuhh Uuuhhh,

I have managed to done it :P Tested On multiple datasets. Its working like a charm. Would you like to check it? I would love to have it on board :D

It will be my first Open Source Contribution :D

[Hermanya]

Nice, congrats.
Please open a PR!

[mrfambo]

@Hermanya Done

[Hermanya]

Thanks I'll take a look after the game (Russia Croatia)

[mrfambo]

@Hermanya What a sizzling match it was !!! Feeling sad for Russia.

[RikTheunis]

Hi @alimuqaddas, what is the recommended way to show the 2 lines?

[rzdev]

@mrfambo i'm having issue with the following datasets

const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ data: [ 50, 50, 50, 50, 50, 50 ] },{ data: [ 20, 20, 20, 20, 20, 20 ] },{ data: [ 67, 67, 67, 67, 67, 67 ] }] };

it should show 3 lines, but only 1 line is shown

[mrfambo]

@rzdev which version are you using?

[rzdev]

@mrfambo thank you for your quick reply, i'm using react-native-chart-kit v1.2.1

[rzdev]

it seems other user have found similar issue https://github.com/indiespirit/react-native-chart-kit/issues/70

[prasad456]

I'm using 2.0.1 version I have two graphs to display one graph should display two lines and other should display four lines,
but only two lines graph is showing for the second graph only one line is displaying
if converted the second graph its showing as single line only?

[Ahmad5448]

sir Ali how did you do that ??? now I need it badly

[iamadityaaz]

This is the code which helped me to achieve the following Output :
Code :

                             <LineChart
                    bezier
                    withHorizontalLabels={false}
                    withVerticalLabels={false}
                    data={{
                        labels: [' 1', ' 2', ' 3', ' 4', ' 5', ' 6'],
                        datasets: [
                            {
                                data: [1, 7, 6, 4, 2, 5],
                                strokeWidth: 2,
                                color: (opacity = 1) => `rgba(255,0,0,${opacity})`, // optional
                            },
                            {
                                data: [2, 4, 6, 8, 8, 2],
                                strokeWidth: 2,
                                color: (opacity = 1) => `rgba(0,0,102, ${opacity})`, // optional
                            },
                            {
                                data: [9, 4, 7, 8, 2, 4],
                                strokeWidth: 2,
                                color: (opacity = 1) => `rgba(0,102,0, ${opacity})`, // optional
                            },
                        ],
                        legend: ['Maths', 'SOM', 'DS'],
                    }}
                    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={{
                        marginVertical: 8,
                        borderRadius: 16,
                    }}
                />

Output

[EskimoEmoji]

Is there a way to have the Y and X-axis labels to show?
Edit: lol I justed needed to remove
withHorizontalLabels={false}
withVerticalLabels={false}

Thanks for the above code! very useful

[EskimoEmoji]

Would there be a way to set specific X & Y coordinates values? I'm running into the issue with multiple lines of different length data, that the points are not on the correct X value, only the correct Y value. Thanks

[SolYsky]

Good

[quicksilverr]

@Hermanya @mrfambo
Is there a way, to change the shadow colors for each of the graphs?

I see, a renderShadow function, in the LineGraph component, can we extract the data.datasets color, option and then use it there?

[quicksilverr]

@Hermanya @mrfambo
Here's the link to a similar StackOverFlow Question ->
https://stackoverflow.com/questions/65965084/react-native-chart-kit-different-shadow-color

It would be a great feature, that we can add to it.