CODEWITHSUNDEEP
javascriptchartsc3.js
Marc Rasmussen
Marc Rasmussen

Reputation: 20565

C3 js Cannot read property 'width' of undefined

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?

Upvotes: 1

Views: 12011

Answers (2)

Paulo Borba
Paulo Borba

Reputation: 41

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

Upvotes: 1

Marc Rasmussen
Marc Rasmussen

Reputation: 20565

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.

Upvotes: 7

Related Questions