C3JS - Cannot read property 'category10' of undefined

Question

I tried this c3.js code from jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) but it doesn't seem to work in my localhost.

I'm using uniserver as my server. I copy-paste everything but it's not working.

<html>
    <head>
        <!-- CSS -->
        <link href="css/c3.css" rel="stylesheet" type="text/css" />

        <!-- JAVASCRIPT -->
        <script src="js/d3.min.js" type="text/javascript"></script>
        <script src="js/c3.js" type="text/javascript"></script>

        <script type="text/javascript">
            window.onload=function(){
                var chart = c3.generate({
                    data: {
                        columns: [
                            ['data1', 300, 350, 300, 0, 0, 0],
                            ['data2', 130, 100, 140, 200, 150, 50]
                        ],
                        types: {
                            data1: 'area',
                            data2: 'area-spline'
                        }
                    },
                    axis: {
                        y: {
                            padding: {bottom: 0},
                            min: 0
                        },
                        x: {
                            padding: {left: 0},
                            min: 0,
                            show: false
                        }
                    }

                });
            }
        </script>
    </head>
    <body>
        <div id="chart"></div>
    </body>
</html>

What I got when I check the Developer Tools' console is this:

c3.js:5783 Uncaught TypeError: Cannot read property 'category10' of undefined

I tried different versions of c3.js but nothing. It's weird because it's working in jsfiddle and not in my local.

Try to provide the entire absolute path for both libraries. It's also a good idea moving your code to the end of the body. — Gerardo Furtado, Jul 13 '16 at 07:06
After doing some combinations, it turns out it's the d3.js path that is not working. I tried to provide the whole localhost path and C: drive path but it's still not working. The solution I got is to use external url (http://d3js.org/d3.v3.js). I don't how it's working like that but, yeah, it's working now. Thanks to your idea. :) — JJC, Jul 13 '16 at 07:21
For what it's worth, I solved the exact same JS error on another project by downgrading from D3.js v4 (4.1.1) to v3 (3.5.17). — Arto Bendiken, Jul 13 '16 at 15:37
@ArtoBendiken, hey, it works! thanks! I would have up vote your comment if I can. — JJC, Jul 15 '16 at 06:43
@JJC Cool! Since it works for you, I added a proper answer so that others who stumble across the issue will be able to figure it out. — Arto Bendiken, Jul 16 '16 at 12:18

score 75 · Accepted Answer · answered Jul 16 '16 at 12:17

75

I solved the exact same JavaScript error on another project by downgrading from D3.js v4 (4.1.1) to v3 (3.5.17).

It turns out that C3.js, as of July 2016, does not support D3.js v4:

It definitely will not work as-is with [D3.js] 4.0. D3 v4 has a totally different namespace and is in no way backwards compatible. Updating to v4 is a very non-trivial task.

answered Jul 16 '16 at 12:17

Arto Bendiken

2,567
1
24
28

7

You can get the version here https://github.com/d3/d3/releases/tag/v3.5.17? Thanks for your answer, that helped alot. – agoldev Oct 15 '16 at 09:52
If you not using npm and are using the rails gem of D3 adding this code to you gem file will fix the problem `gem 'd3-rails', '~> 3.5.17'` – User128848244 May 04 '17 at 04:58
https://rubygems.org/gems/d3-rails/versions/3.5.17 Oh also here is a link to the gem version I am referencing in the comment above. – User128848244 May 04 '17 at 04:59
Is c3.js version important? – JP. K. Jun 06 '17 at 03:07

Jae Sung Park · Answer 2 · 2018-02-19T02:02:55.243

It's because, C3.js is based on D3 v3, and the error occurs when try to run with D3 v4.

The error occurs on below line of code:

pattern = notEmpty(config.color_pattern) ?
    config.color_pattern : d3.scale.category10().range()

https://github.com/c3js/c3/blob/master/src/color.js#L7

On D3 v4, d3.scale.category10().range() should be used as d3.scaleOrdinal(d3.schemeCategory10), but as C3.js can't be ran on D3 v4 it's meaningless changing this part of code only.

If anyone need working with D3 v4+, try https://naver.github.io/billboard.js/.

billboard.js is a forked project of C3.js, having same interface with D3 v4+ support.

score 1 · Answer 3 · answered May 24 '18 at 21:11

1

The issue is the version of C3 you're using doesn't support the version you're using:

D3 ver | requires C3 ver
3.x    |  0.4
4.x    |  0.5
5.x    |  0.6

Simply make sure you're using the correct version of C3 and you should not see this error.

answered May 24 '18 at 21:11

BryanH

5,826
3
34
47

C3JS - Cannot read property 'category10' of undefined

3 Answers3

Linked

Related