React Native Expo, Invalid Number: M0, 0 L-Infinity

Question

When i am trying to implement a react-native-chart-kit graph, I get this error message.

However, when i dismiss it, all the code works. I am using use states to have it render once data from database is loaded, which might me the issue. However, im just a bit confused because I have done a similar thing with another graph which worked with no issues.

const [lineData, setLineData] = React.useState({
  datasets: [{
    data: [],}]
})

var moodLine = []

        if (value["entry"]["mood"] == 1) {
            mood1 += 1
            moodLine.push(1)
        }

    setLineData({
      datasets: [{
        data: moodLine,
      }]
    })
    

                  <LineChart 
                    data={lineData}
                    width={360}
                    height={220}
                    bezier
                    withInnerLines={false}
                    fromZero={true}
                    // chartBreakPoints={[0, 1, 2, 3, 4, 5]}
                    // hidePointsAtIndex={[0, 1, 2, 3, 4, 5]}
                    // withHorizontalLabels={false}
                    chartConfig={{
                      
                      
                      backgroundColor: colours.white,
                      backgroundGradientFrom: colours.white,
                      backgroundGradientTo: colours.white,
                      
                      decimalPlaces: 0, // optional, defaults to 2dp
                      color: (opacity = 1) => colours.grey,
                      labelColor: (opacity = 1) => colours.black,
                      // style: {
                      //   borderRadius: 16,
                      // },
                      // propsForDots: {
                      //   r: "0",
                      //   strokeWidth: "2",
                      //   stroke: "#ffa726"
                      // }
                    }}
                    style={{
                      borderRadius: 16,
                      // marginBottom: 50

                  
                  
                    }}

                  />

Answer 1

We need to provide some default values to the chart or else during the initial render the chart values are NaN and hence throws that error const

[oeeChartData, setOeeChartData] = useState<ChartData>({ labels: ['0', '0', '0', '0', '0', '0'], data: [0, 0, 0, 0, 0, 0], });