React-native-chart-kit: PieChart InvalidNumber Error
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
Thembelani
All 7 comments
Can confirm that this happens on a fresh build, too.
stonebinox
on 24 Jun 2020
Same issue here. Has anyone found a solution? @stonebinox @Thembelani
geroale
on 4 Jul 2020
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
stonebinox
on 5 Jul 2020
same problem happen in lineChart
InvalidNumber: M-Infinity 140.2 64 140.2z
JesseWeb
on 18 Nov 2020
same problem happen in lineChart
InvalidNumber: M0,0 L-Infinity,181 L64,181 Z
hengkx
on 6 Dec 2020
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]);
imoby
on 9 Dec 2020
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>
)
sudo-vaibhav
on 18 Jan 2021
Related issues
bailih
路
4Comments
briaclg
路
4Comments
violabg
路
6Comments
vedika96
路
4Comments
uttampawar
路
3Comments
Most helpful comment
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>)