Multiple datasets not working properly in line chart

[qasimmehdi]

I have a line chart with two datasets if one dataset is larger than the other it show continue further but it doesnot do that.

What I want is that the green should end and the blue line should continue.

          <LineChart
            data={{
              labels: [...labels],
              datasets: [
                {
                  data: [...data],
                  color: (opacity = 1) => `rgba(0, 255, 0,${opacity})`,
                },
                {
                  data: [...data2], //this has 50 more items that data array
                  color: (opacity = 1) => `rgba(51, 29, 226,${opacity})`,
                },
              ],
            }}
            width={Dimensions.get('window').width}
            height={220}
            yAxisLabel="$"
            yAxisInterval={1}
            chartConfig={{
              backgroundGradientFrom: COLOR.BG,
              backgroundGradientTo: COLOR.BG,
              backgroundColor: COLOR.BG,
              decimalPlaces: 2, // optional, defaults to 2dp
              color: (opacity = 1) => `rgba(0, 255, 0, ${opacity})`,
              labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
              style: {
                borderRadius: 16,
                backgroundColor: COLOR.BG,
              },
              strokeWidth: 2,
            }}
            withShadow={false}
            withInnerLines={false}
            withDots={false}
          />

Edit: please also tell me how to make the line completly opaque right now they are not if I give white color to a line it is shown as gray.

[bm181354]

Not just multiple data. The whole line graph doesn't work when label (X-axis) and data (Y-axis) have different length. It seems to only work when there is bijection (|x| = |Y|). Every other instance, it fails. This has been addressed multiple time here but no response.

[coltonmccormack]

I've rewritten the x-axis line-chart logic to allow for dissimilar dataset lengths. I'll eventually work it into a PR.

You can try it here: https://github.com/thatguyyoulove/react-native-chart-kit

Example Chart Output:

[niallotuathail]

The PR looks great @thatguyyoulove. Thanks so much for your contribution. Is there a solution for line charts where we have irregular dates like this use case I have for a physio test results chart?

[cederom]

Thank you @thatguyyoulove :-) Is it possible to also add null value so the shorter chart can start somewhere in the middle of other charts with more datapoints? :-)

coltonmccormack@2bd0f2c

[coltonmccormack]

@niallotuathail @cederom It looks like you both are interested in a similar issue, which I could see also affecting my app in the future. It seems that there are a few different outcomes that could occur that we want to be handled properly.

1. Data is missing mid-graph and we want to smooth the line between the points.
2. The data starts mid-graph and we want the line to begin there.
3. Data is missing mid-graph and we want the line to stop and start as a new line at the next point.

1 could be done fairly easily by skipping null values entirely. From the code it looks like this is already implemented for line graphs but not for bezier line graphs. It appears it would be pretty easy to add to those as well.

I think 2 and 3 would be better handled by breaking up the dataset into segments by null values and using the existing PR #515 I made to allow you to render those segments in the proper locations (by measuring across the whole axis, rather than dataset length). So, replace the existing calls to renderLine, renderShadow, etc. in the main render blocks with a few wrapper functions that break up the datasets on nulls (unless we want to draw lines between missing points like 1, which needs a new config option) and feed each segment into the existing code for rendering.

[cederom]

Thank you @thatguyyoulove :-)

Currently the in the bezier LinePlot "shorter" Y data is stretched across all X points so start and and middle points fills the whole diagram width, middle points are aproximated by bezier curve.

Not to break that and maintain backward compatibility, I think that adding null or NaN in the "shorter" dataset Y data should just not draw a point/line. That way user could easily generate a diagram that would be placed in the start/middle/end of the diagram, even put non-continuous plot. It seems that null is treated as 0 value, so maybe using NaN would be more safe and will not break backward compatibility. I am not sure how null is defined by modern JS standard please correct me if null can be distinguished from 0 then this would be safest choice, NaN otherwise.

This seems to be simplest and most generic way to implement and most versatile at the same time. User usually knows how many X points are there in the plot because user needs to generate X axis labels, so filling additional NaN before/after point of interest for non-continuous plots seems fairly simple and leaves control to the user on how the plot will look.

That would require generating one or more bezier curves before drawing based on provided data. Generation loop would require one boolean state variable (lets call it) L set at start to 0 and it will be used to remember if a line is currently drawn iterating sequentialy over data points. Maybe there is a simpler way :-)

• If the data is NaN and L=0 then skip to the next point (L=0 -> L=0), else put a point and continue drawing a bezier curve (L=1 -> L=1) or start drawing a bezier curve (L=0 -> L=1).
• If L=1 and end of data or next data is NaN then put a point and close bezier curve (L=1 -> L=0).

For instance:

• we have data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as the "long" dataset.
• we can create dataA = [ 1, 2, 3, 4] as with current implementation that would strech across all 10 x points.
• we can create dataB = [ NaN, NaN, 3, 4, 5, 6, NaN, NaN, NaN, NaN] to have another short plot in the middle of the diagram with no stretch.
• we can create dataC = [ NaN, 2, 3, 4, NaN, NaN, 8, 9, 10] to have non-continuous plot on the same diagram with no stretch.

That way we don't really need to even recalculate anything, just create a plot only for non NaN / null points, that should work on top of current code, and that just can be selected if data contains NaN/null instead of standard curve generation, if no null is in data then standard curve generation takes place. This can be most non-invasive, backward compatible, and generic way to implement new feature :-)

Long story short: when data contains NaN/null do not put a plot point, that means plot is not drawn for that point (it will be closed on preceeding point if there was one).

[weraaaaz]

Is there any chance to merge it anytime soon?

[JoonatanNguyen]

Hi, when will this issue be solved? I saw the pull request is created and pending but it's not merged.

[coltonmccormack]

The library's authors haven't updated it in some time. Further, I am no longer involved in the company or project that I made this PR for, so I likely won't develop it further. I would recommend cloning my fork of the project at https://github.com/coltonmccormack/react-native-chart-kit, building it, and using the build files in your project if you need this functionality. Keep a watch on this repository in case it gets merged in at some later time.

[coltonmccormack]

Is there any chance to merge it anytime soon?

This has now been merged.

[Noitham]

Hello @coltonmccormack, been checking this discussion since I am facing the same issue.

The case mentioned a bit above:

dataC = [ NaN, 2, 3, 4, NaN, NaN, 8, 9, 10]

is still not possible to add to the chart right? Since the data type can't take NaN / null values.

[coltonmccormack]

@Noitham That is correct, or at least was the last time I looked at this project.