react-native-chart-kit
react-native-chart-kit copied to clipboard
indiespirit
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
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
same problem happen in lineChart
InvalidNumber: M-Infinity 140.2 64 140.2z
same problem happen in lineChart
InvalidNumber: M0,0 L-Infinity,181 L64,181 Z
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]);
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>
)
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
same problem happen in lineChart
InvalidNumber: M-Infinity 140.2 64 140.2z
did the issue get solved ??
@jetonk @wilsonfurtado2000 try @sudo-vaibhav solution or apply it at your specific case, the core of this problem is that the engine try to make chart before all data has been set. The problem is useState it is async event queued on event loop executed after the chart render, use a loading state to mange render.
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).
