PieChart InvalidNumber Error

[Thembelani]

Hi guys,

"react-native-chart-kit": "4.1.0", "react-native-svg": "^9.13.5", "prop-types": "^15.7.2",

The Piechart does not render. I get the following error

InvalidNumber: M NaN NaN A 88 88 0 0 1 NaN NaN L NaN NaN A 0 0 0 0 0 NaN NaN Z

Please help

[stonebinox]

Can confirm that this happens on a fresh build, too.

[geroale]

Same issue here. Has anyone found a solution? @stonebinox @Thembelani

[stonebinox]

Same issue here. Has anyone found a solution? @stonebinox @Thembelani

It's a shame, really. This looked good but I couldn't get some of the other chart types going either.

Ended up dumping this lib and going with https://www.npmjs.com/package/react-native-svg-charts#piechart

[JesseWeb]

same problem happen in lineChart InvalidNumber: M-Infinity 140.2 64 140.2z

[hengkx]

same problem happen in lineChart

InvalidNumber: M0,0 L-Infinity,181 L64,181 Z

[imoby]

I was able to solve this issue by making sure that I had an initial value if my data was referencing a state value that had not yet been set.

For example, my useState looked like this for the data part: const [myData, setMyData] = useState([]);

it would keep failing with this same error until I changed it to have a default value like this, to match my labels: const [myData, setMyData] = useState([0, 0, 0, 0, 0, 0]);

[sudo-vaibhav]

The better and more elegant solution that I settled with which has been a common fix with these strange errors related to chart/SVG rendering in react native is to set a loading boolean key along with your data in the state. The main idea is that you don't render the chart/svg until that loading variable becomes false. Try this:

You would expect the default empty array would work in useState([ ]) by simply showing a blank chart briefly, but turns out that this causes most chart rendering libraries in the react native realm to break.

Try something like the code below, this is a generic answer and not strictly related to this package. That's why I have used a generic ChartOrSVG component instead but I hope you will understand my point. Forgive me if I am making some mistake. I am not the best developer when it comes to React concepts.

const [values,setValues] = useState({data:[],loading:true}) useEffect(()=>{ fetchData().then(data=>{ setData({data:data , loading:false}) }) },[]), return ( <View> {loading? null : <ChartOrSVG data={values.data} /> </View> )

[vahidinline]

I was able to solve this issue by making sure that I had an initial value if my data was referencing a state value that had not yet been set.

For example, my useState looked like this for the data part: const [myData, setMyData] = useState([]);

it would keep failing with this same error until I changed it to have a default value like this, to match my labels: const [myData, setMyData] = useState([0, 0, 0, 0, 0, 0]);

Hi, that's did not work

[wilsonfurtado2000]

same problem happen in lineChart InvalidNumber: M-Infinity 140.2 64 140.2z

did the issue get solved ??

[jetonk]

I just got this issue too in 2022 :)

[homit-dalia]

This error occurs when I try to set the progress of the chart to the value 0 / 0 that is, zero divided by zero. I solved this by doing a 0 / Math.max(variable, 1).