C3.js line chart error

Question

I am using this code to generate a C3.js linechart but encountering an error in console as

Uncaught ReferenceError: c3 is not defined at index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>C3Charts</title>
  <script>
    //Column data
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  </script>
</head>

<body>

  <div id="chart">

  </div>

  <!-- Load c3.css -->
  <link href="bower_components/c3/c3.css" rel="stylesheet" type="text/css">

  <!-- Load d3.js and c3.js -->
  <script src="bower_components/d3/d3.min.js" charset="utf-8"></script>
  <script src="bower_components/c3/c3.min.js"></script>
</body>

</html>

Looking out for a solution

You need to move your code (c3.generate) after c3 script is loaded — sean1093, Jun 29 '19 at 03:08

score -1 · Answer 1 · answered Feb 09 '17 at 05:32

There is a problem with position of your

<script>
//Column data
var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  }
});

Which is currently place in head tag.

The solution is to move you script tag after c3.js and your <div id="chart"></div> is loaded.

C3.js line chart error

1 Answers1