CODEWITHSUNDEEP
react-nativegoogle-cloud-firestorereact-native-chart-kit
Vahid Afshari
Vahid Afshari

Reputation: 89

Unable to use Dynamic data into react-native-chart-kit

I tried to render fetched data from the firestore and display them into react-native-chart-kit. However, I always face the below error:

invalidNumber: M0,0 L-Infinity,181 L64,181

I got data correctly from the database by this function:

const getweight = () =>
    firebase
      .firestore()
      .collection("weights")
      .orderBy("time")
      .where("user", "==", "1")
  .get()
  .then((querySnapshot) => {
    let result = [0];
    querySnapshot.forEach((doc) => {
      result.push(+doc.data().Weight);      
    });

    setDateTracker(date);
    if (result.length) {
      setWeighTracker(result);
    }
  });

so, I got the array with the right data.

Then, I push data to the state below:

  const [weightTracker, setWeighTracker] = useState([0]);

when I try to display data to the chart like below, I got error of invalid number

<LineChart
            data={{
              datasets: [
                {
                  data: weightTracker.map((item) => {
                    return item.Weight;
                  }),
                },
              ],
            }}
            width={Dimensions.get("window").width} // from react-native
            height={220}
            yAxisLabel=" KG "
            //withVerticalLabels={false}
            chartConfig={{
              backgroundColor: "#e26a00",
              backgroundGradientFrom: "#fb8c00",
              backgroundGradientTo: "#ffa726",
              decimalPlaces: 0, // optional, defaults to 2dp
              color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
              style: {
                borderRadius: 1,
              },
            }}
            bezier
            style={{
              marginVertical: 8,
              borderRadius: 16,
            }}
          />

Upvotes: 2

Views: 1177

Answers (1)

johnny-robot
johnny-robot

Reputation: 96

I encountered the same error even when the data is with initial state of 0 . What fixed mine is to only display the chart once data is loaded.

You may add an if check like this before your chart code:

if (weightTracker?.length === 0) {
    return (
      <View style={styles.screen}>
        <Text>No chart data to display!</Text>
      </View>
    );
  }

return (...<your linechart code>)

For the if check to work, you also need to set the initial state of weightTracker to just an empty array. Hope this helps.

Upvotes: 3

Related Questions