C3JS - Cannot read property 'category10' of undefined

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.

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.

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

D3 ver | requires C3 ver3.x    |  0.44.x    |  0.55.x    |  0.6

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