I am trying to setup a C3 chart for the first time.

I have followed the example on their offical website and got the following html:

<section class="panel panel-default">
    <header class="panel-heading font-bold">C3 Test</header>
    <section class="panel-body">
        <div id="chart"></div>
    </section>
</section>

For this i have the following javascript:

    var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data2: 'y2'
        },
        types: {
            data2: 'bar'
        }
    },
    axis: {
        y: {
            label: {
                text: 'Y Label',
                position: 'outer-middle'
            },
            tick: {
                format: d3.format("$,") // ADD
            }
        },
        y2: {
            show: true,
            label: {
                text: 'Y2 Label',
                position: 'outer-middle'
            }
        }
    }
});

However when i run this i get the following error:

Uncaught TypeError: Cannot read property 'width' of undefined c3.min.js:3

Does anyone know what the problem might be?

I am trying to setup a C3 chart for the first time.

I have followed the example on their offical website and got the following html:

<section class="panel panel-default">
    <header class="panel-heading font-bold">C3 Test</header>
    <section class="panel-body">
        <div id="chart"></div>
    </section>
</section>

For this i have the following javascript:

    var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data2: 'y2'
        },
        types: {
            data2: 'bar'
        }
    },
    axis: {
        y: {
            label: {
                text: 'Y Label',
                position: 'outer-middle'
            },
            tick: {
                format: d3.format("$,") // ADD
            }
        },
        y2: {
            show: true,
            label: {
                text: 'Y2 Label',
                position: 'outer-middle'
            }
        }
    }
});

However when i run this i get the following error:

Uncaught TypeError: Cannot read property 'width' of undefined c3.min.js:3

Does anyone know what the problem might be?

• javascript
• charts
• c3.js

2 Answers 2

Okay i found the answer

Uncaught TypeError: Cannot read property 'width' of undefined

Apprently you have to wait untill the document is loaded or load the scripts at the bottom of your page for it to work.

You can also 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/d3.v5.min.js"></script>
<script src="myscript.js" defer></script>