Uncaught TypeError: Cannot read property 'data_types' of null

[bvenkatr]

Hi, I am getting this error whenever the pie chart is re-rendered by react. This happens only sometimes, not every time react re-renders.

[handoff]

Me too. If I navigate away within the app, and then come back I get the error. If I reload the page using the browser's button it works. It is only the pie, and the donut that doesn't work.

[forum-is]

We're seeing the same issue, although only occasionally. Any updates / ideas what is causing this error?

[AlbertoCalvo]

Same issue

[jiekang]

This can be seen when using c3js in an Angular 2+ application as well for donut/pie charts. I'm pretty certain it's an error in c3js similar to [1].

When you destroy a chart it sets a number of fields to null. However there are timer actions in the background trying to use these fields to render things. In certain conditions, the destroy will set the fields to null before the timer accesses theses fields and things will break spectacularly.

The related fixes in [1] are basically adding null checks to various places. It looks like some more are needed for the donut/pie charts.

[1] c3js/c3#1205

[theonlyfox]

EDIT: I thought I was on the C3 issues page and realize this is a side project built on C3. I'm using straight C3 and having these same issues, not sure if they are related but I'll leave this here and remove it if asked.

Im getting similar after calling destroy on a "timeseries" chart:

TypeError: $$.data is null[Learn More] c3.js:7890:5
c3_chart_internal_fn.getShapeIndices http://localhost:3000/c3.js:7890:5
c3_chart_internal_fn.redraw http://localhost:3000/c3.js:1490:23
c3_chart_fn.unload/< http://localhost:3000/c3.js:4006:9
c3_chart_internal_fn.endall/< http://localhost:3000/c3.js:2031:13
event http://localhost:3000/d3.js:504:40
tick http://localhost:3000/d3.js:8959:29
start/< http://localhost:3000/d3.js:8936:24
d3_timer_mark http://localhost:3000/d3.js:2166:29
d3_timer_step http://localhost:3000/d3.js:2147:15

By the time I get this error I have destroyed 3 charts and flushed all their data, removed their html containers and destroyed the objects that created them. I have a charts class that handles all the chart creation and manipulation for another class.

In addition, if you have any other charts active after invoking a .destroy() on a chart and attempt to update other charts (using .flow() at least) if will create a massive memory leak that will trap all available memory in a very short period of time.

[ghost]

Still throws same error, and crush chart. Adding in my package.json "c3": "^0.6.7" helps to keep chart working but still output error in console

[ayadavkrt]

I am facing the same issue with pie charts

[damianb86]

Same issue

[Thebarda]

Hey, same issue here !
Is anyone found a workaround ?

[idandagan1]

Same issue

[leslie-alldridge]

me too, any workarounds?

[akhilesh-94]

Same issue , any workarounds?

[bkanber]

I had a similar problem and I think I finally figured it out. The <C3Chart> component takes an unloadBeforeLoad prop, however ALL charts on the page need unloadBeforeLoad={true}. If even one chart is missing the unloadBeforeLoad prop, I get weird chart breakages.

[leslie-alldridge]

@bkanber I'm glad it's working for you. I've added the prop to all my charts but unfortunately they still display blank and output

Uncaught TypeError: Cannot read property 'data_types' of null
    at k.E.isPieType (c3.js:9223)
    at k.E.isArcType (c3.js:9234)
    at k.E.getArc (c3.js:4473)
    at c3.js:4816
    at SVGPathElement.<anonymous> (d3.js:8775)
    at Object.h [as c] (d3.js:8956)
    at Mt (d3.js:2166)
    at At (d3.js:2147)

If I refresh the page it's all good. I'm using React + Redux.

[bkanber]

I also have unload: true on all of my data objects. Maybe that's a factor as well. ie, `const data = {unload: true, json: { ...}, groups: ....};`

…

On Fri, Feb 22, 2019, 4:02 PM Leslie Alldridge ***@***.***> wrote: @bkanber <https://github.com/bkanber> I'm glad it's working for you. I've added the prop to all my charts but unfortunately they still display blank and output Uncaught TypeError: Cannot read property 'data_types' of null at k.E.isPieType (c3.js:9223) at k.E.isArcType (c3.js:9234) at k.E.getArc (c3.js:4473) at c3.js:4816 at SVGPathElement.<anonymous> (d3.js:8775) at Object.h [as c] (d3.js:8956) at Mt (d3.js:2166) at At (d3.js:2147) If I refresh the page it's all good. I'm using React + Redux. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEdNn4MATnDdqQBnul9vodg0s0PqVz5ks5vQFr1gaJpZM4M5ESQ> .

[leslie-alldridge]

Thanks for the update @bkanber I've added that to my data object for every chart but continue to get the same error. Files attached

[michael-brittlebank]

I can confirm that I am still seeing this error with a gauge chart even with adding unloadBeforeLoad and unload on the data objects

[Jiish]

+1 for this issue. If chart.destroy() is called inside ngOnDestroy(), the error appears for doughnut and bar charts.