C3: Uncaught TypeError: Cannot read property 'scale' of undefined

Created on 15 May 2015 · 8Comments · Source: c3js/c3

i just downloaded new version started using example on http://c3js.org/samples/simple_multiple.html

i got the error
Uncaught TypeError: Cannot read property 'scale' of undefined

Source

corporatepiyush

Most helpful comment

Thanks, I included D3 before C3 and worked.

rquiroga on 11 Nov 2015

👍5 👎3

All 8 comments

I get the same error. On safari, it says TypeError: undefined is not an object (evaluating 'd3.scale'). Is there some new requirement for the newer version?

elmehalawi on 24 May 2015

For me, this was an issue with my include of d3.js. It wasn't recognizing some of the variable names because some of them were Greek letters. If you just include the minified version (d3.min.js) before c3.js, it should work.

elmehalawi on 25 May 2015

I am getting the same error.
I included the d3.min.js before c3.min.js but still see the error.

rampart81 on 22 Jun 2015

👍4

Thanks, I included D3 before C3 and worked.

rquiroga on 11 Nov 2015

👍5 👎3

Shouldn't this be closed?

delucas on 31 Oct 2016

I ran into this same error attempting to use the current non-minified versions of C3 (0.4.11) and D3 v3 (3.5.17).

When I switched to the minified versions the same simple test worked. I'm using the example from the getting started guide.

A find it more than a little concerning that the behavior would be be different between the minified and non-minified versions. Can someone explain this?

I'm running on Mac and using files directly downloaded from the _raw_ links on GitHub (versions specified above).

Here is the test html. Note it's using the non-minified d3.js file that seems to be the problem. If I replace it with d3.min.js (commented out) then the error goes away.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>C3 Chart Example</title>

    <link rel="stylesheet" type="text/css" href="c3.css"/>
    <!-script type="text/javascript" src="d3.min.js"></script-->
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="c3.js"></script>
</head>

<body>
<div id="chart" class="container"></div>
<script type="text/javascript">
    var chart = c3.generate({
        bindto: '#chart',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ]
        }
    });
</script>
</body>

</html>

This sure feel to me like something that should be fixed or at the very least a better error message given for this use case.

medington on 6 Dec 2016

I think this isn't a issue now. If someone still see the same error in the latest version, please open new one. Thanks.

kt3k on 22 Sep 2017

Include D3 before C3 and worked.
But it has to be version 3.5.17 because version 4 of d3 is not compatible with c3.
See here: https://github.com/c3js/c3/issues/1648