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

Share Improve this question Follow asked Oct 28, 2014 at 12:14 Marc RasmussenMarc Rasmussen 20.6k8383 gold badges223223 silver badges384384 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>