LineChart with areaChart and curved doesn't fill data4 area

[DanDoW]

Hello!!
First of all, thanks for the great work!

I'm having an issue building a various data sets LineChart, I paint them with diferent fill colors and use the line color transparent, but the 4th data set is not filling up, is this an error anyone has?
I tried to do the code in coding playgrounds but I wasn't able....

Thanks!

[Abhinandan-Kushwaha]

Hi @DanDoW
Can you please send the datasets and the screenshot of the chart?

[DanDoW]

const colors = ['#3DCD88', '#FF6BC0', '#2D9CDB', '#F9C74F', '#000000'];
const lineData1 = [{value: 0},{value: 10},{value: 8},{value: 58},{value: 56},{value: 78},{value: 74},{value: 98}];
const lineData2 = [{value: 0},{value: 20},{value: 18},{value: 40},{value: 36},{value: 60},{value: 54},{value: 85}];
const lineData3 = [{value: 10},{value: 8},{value: 58},{value: 56},{value: 78},{value: 74},{value: 0},{value: 98}];
const lineData4 = [{value: 18},{value: 40},{value: 0},{value: 20},{value: 36},{value: 60},{value: 54},{value: 85}];
const lineData5 = [{value: 8},{value: 28},{value: 56},{value: 0},{value: 10},{value: 78},{value: 74},{value: 98}];

not the original datasets as I made a function to make them random, but it replicates the error, I also add the props for the linechart:

<LineChart
  areaChart
  curved
  data={lineData1}
  data2={lineData2}
  data3={lineData3}
  data4={lineData4}
  data5={lineData5}
  color1='transparent'
  color2='transparent'
  color3='transparent'
  color4='transparent'
  color5='transparent'
  startFillColor1={colors[0]}
  endFillColor1={colors[0]}
  startFillColor2={colors[1]}
  endFillColor2={colors[1]}
  startFillColor3={colors[2]}
  endFillColor3={colors[2]}
  startFillColor4={colors[3]}
  endFillColor4={colors[3]}
  startFillColor5={colors[4]}
  endFillColor5={colors[4]}
  startOpacity={0.2}
  endOpacity={0.2}
  height={350}
  spacing={35}
  maxValue={100}
  initialSpacing={20}
  // hideDataPoints
  dataPointsColor1={colors[0]}
  dataPointsColor2={colors[1]}
  dataPointsColor3={colors[2]}
  dataPointsColor4={colors[3]}
  dataPointsColor5={colors[4]}
  hideRules
  yAxisColor='transparent'
  xAxisColor='transparent'
  overflowBottom={0}
  scrollToEnd={true}
/>

[Abhinandan-Kushwaha]

Hi @DanDoW
This is actually a bug, and I have found the fix. Will release the new version with a fix in 1 or 2 days.

[DanDoW]

Love you!
I tried to find the bug, but I wasn't able 😅
With time and experience, I'll be able to come directly with the solution 💪😁

[Abhinandan-Kushwaha]

More power to you!
BTW, the bug is in line 1148 in the file https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/src/LineChart/index.tsx
There should be xx4 instead of xx in line 1148

[DanDoW]

Awesome!!
I wasn't that far, yet far enough 🤣
I knew it was on that file, and I understood some of the ramifications, but I gave up... it felt overwhelming.
I'm glad to see I was on the right track though 😁

PS: Thank you for taking the time to explain me, it helps me grow 🤗

[Abhinandan-Kushwaha]

Hi @DanDoW 👋
This has been fixed in version 1.3.11 🎉