search

chartist-js / chartist

Simple responsive charts
https://chartist.dev
MIT License
13.35k stars 2.53k forks source link

Invalid value for <line> attribute x2="NaN" #226

Closed gsklee closed 9 years ago

gsklee commented 9 years ago

I'm getting this error seemingly out of random; it may or may not appear while rendering the same data, and even if it does appear, there are about 50% of chance that everything will look and work like normal. For the other 50% unlucky times weird glitches will happen, for example, bars having NaN as their ct:value and being rendered as infinite negative values.

Error: Invalid value for <line> attribute x2="NaN"main.js:32123 (anonymous function)main.js:32114 attrmain.js:32080 Svgmain.js:31810 constrmain.js:32141 elemmain.js:33695 (anonymous function)main.js:33671 (anonymous function)main.js:33651 createChartmain.js:31894 updatemain.js:10859 updateChartmain.js:10793 componentWillReceivePropsmain.js:24063 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:46727 ReactChildReconciler.updateChildrenmain.js:49077 ReactMultiChild.Mixin._updateChildrenmain.js:49051 ReactMultiChild.Mixin.updateChildrenmain.js:12522 ReactDOMComponent.Mixin._updateDOMChildrenmain.js:12374 ReactDOMComponent.Mixin.updateComponentmain.js:12358 ReactDOMComponent.Mixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:46727 ReactChildReconciler.updateChildrenmain.js:49077 ReactMultiChild.Mixin._updateChildrenmain.js:49051 ReactMultiChild.Mixin.updateChildrenmain.js:12522 ReactDOMComponent.Mixin._updateDOMChildrenmain.js:12374 ReactDOMComponent.Mixin.updateComponentmain.js:12358 ReactDOMComponent.Mixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:46727 ReactChildReconciler.updateChildrenmain.js:49077 ReactMultiChild.Mixin._updateChildrenmain.js:49051 ReactMultiChild.Mixin.updateChildrenmain.js:12522 ReactDOMComponent.Mixin._updateDOMChildrenmain.js:12374 ReactDOMComponent.Mixin.updateComponentmain.js:12358 ReactDOMComponent.Mixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:46727 ReactChildReconciler.updateChildrenmain.js:49077 ReactMultiChild.Mixin._updateChildrenmain.js:49051 ReactMultiChild.Mixin.updateChildrenmain.js:12522 ReactDOMComponent.Mixin._updateDOMChildrenmain.js:12374 ReactDOMComponent.Mixin.updateComponentmain.js:12358 ReactDOMComponent.Mixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23950 ReactCompositeComponentMixin.receiveComponentmain.js:8656 ReactReconciler.receiveComponentVM72462:118 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.receiveComponentmain.js:24187 ReactCompositeComponentMixin._updateRenderedComponentmain.js:24166 ReactCompositeComponentMixin._performComponentUpdatemain.js:24086 ReactCompositeComponentMixin.updateComponentmain.js:6399 ReactPerf.measure.wrappermain.js:23983 ReactCompositeComponentMixin.performUpdateIfNecessarymain.js:8674 ReactReconciler.performUpdateIfNecessaryVM72462:112 __REACT_INSPECTOR_RUNTIME__0_13_0.React.ReactReconciler.performUpdateIfNecessarymain.js:4953 runBatchedUpdatesmain.js:10228 Mixin.performmain.js:10228 Mixin.performmain.js:4897 assign.performmain.js:4977 flushBatchedUpdatesmain.js:6399 ReactPerf.measure.wrappermain.js:10301 Mixin.closeAllmain.js:10242 Mixin.performmain.js:48017 ReactDefaultBatchingStrategy.batchedUpdatesmain.js:5017 enqueueUpdatemain.js:12664 enqueueUpdatemain.js:12842 ReactUpdateQueue.enqueueSetStatemain.js:23353 ReactComponent.setStatemain.js:27095 onStoreChangemain.js:35845 emitmain.js:10461 emitChangemain.js:10454 module.exports._createClass.digest.valuemain.js:41033 Dispatcher.$Dispatcher_invokeCallbackmain.js:41008 Dispatcher.dispatchmain.js:7890 (anonymous function)main.js:8759 (anonymous function)main.js:44083 (anonymous function)main.js:41830 applymain.js:44064 (anonymous function)main.js:42155 applyEachmain.js:43693 emitmain.js:43263 nodeClosedmain.js:42707 (anonymous function)main.js:42155 applyEachmain.js:43693 emitmain.js:42485 handleDatamain.js:42155 applyEachmain.js:43693 emitmain.js:42904 handleProgress
gionkunz commented 9 years ago

This seems to be an issue in relation to React. I'm not a React user and therefore can't debug currently. If someone with react experience is able to debug this issue I'd be very happy. Most likely it's related to React rendering the DOM offscreen where Chartist is not able to get available dimensions. Once we know that this is the problem, we could add some fallback solutions if Chartist does not know the dimensions.

This is most likely a duplicate of #193 so I'm closing this issue.