C3js - Uncaught TypeError: Cannot read property 'data' of null

Question

The error message is re-created in this demo:

http://plnkr.co/edit/6Tok16U287sKHQpsRAmX?p=preview

var chart = c3.generate({
  data: {
      "columns":  [["B1", 1], ["B2", 2]],
      "type": "donut",
      onclick: onClick,
  },
  donut: { "title": "Iris Petal Width" }
});

function onClick(){
  chart.load({
      columns: [['A_B1', 1], ['B_B1', 2]],
      unload: ['B1', 'B2']
  });
}

The documentation for the function is here:

http://c3js.org/reference.html#api-load

Do you think I'm using this wrong or that it's a bug in the library?

--Reponse to comment-- Error also occurs in a fiddle when a section of the donut is clicked. enter image description here

If you watch the transition animation closely you can see it hesitate when rendering different sections of the donut. These errors occur after the rendering.

It works fine for me. I'm not getting any error messages. Here's a fiddle of it: http://jsfiddle.net/jrdsxvys/12/ — Sean, May 13 '15 at 15:16
I still see the error with your fiddle. I added a screenshot to the question. — StinkySocks, May 14 '15 at 14:12

score 0 · Answer 1 · answered Aug 26 '18 at 17:52

Try to add defer attribute on SCRIPT elements. It instructs the contents of the script tag to not execute until the page has loaded.

So you'll have something like this:

<!-- Load d3.js and c3.js -->
<script src="c3-0.6.7/c3.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="myscript.js" defer></script>

C3js - Uncaught TypeError: Cannot read property 'data' of null

1 Answers1