Can't get c3 chart to render using Vue.js

Question

Simple example won't render. Here is my code:

main.js

var Vue = require('vue');
var c3 = require('c3');
new Vue({
    template: '<div id="puppa"></div>',
     mounted: function () {
        c3.generate({
            bindto: '#puppa',
            data: {
                type: 'area',
                x: 'x',
                xFormat: '%H:%M',
            columns:[
                ['x',"12:38","12:38","12:38","12:38","12:39","12:39","12:39","12:39","12:40","12:40","12:40","12:41","12:41","12:41","12:41","12:42","12:42","12:42","12:42","12:43","12:43","12:43","12:43","12:44","12:44"],
                ['write', 14709198848,14709313536,14709522432,14709633024,14710034432,14710157312,14710341632,14710583296,14710788096,14710931456,14711058432,14711291904,14711508992,14711668736,14711771136,14712008704,14712107008,14712381440,14712586240,14712795136,14712963072,14713077760,14713331712,14713565184,14713729024],
                ['read', 3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080]
            ]
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: function (x) {
                            if (x.getDate() === 1) {
                                return x.toLocaleDateString();
                            }
                        }
                    }
                }
            }
        });
    }
});

No luck. How would c3 know what element with that declaration? — KingKongFrog, Apr 26 '17 at 23:41
I expect it's because you never actually mount to something. Add an `el: `. — Bert, Apr 26 '17 at 23:41

score 2 · Answer 1 · edited May 23 '17 at 12:02

2

In your HTML.

<div id="app"></div>

Or whatever other id you want to use. You need to give your Vue an element to render it's template to. In your Vue

new Vue({
  el: "#app",
  mounted: function() {
    c3.generate({
      bindto: this.$el,
      ...
    })
  }
})

Here is an example.

Also ran across the need to downgrade the d3 version with c3.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 26 '17 at 23:42

Bert

80,741
17
199
164

Maybe this is a part of the problem. I get `[Vue warn]: Cannot find element: #app` – KingKongFrog Apr 26 '17 at 23:45
@KingKongFrog Yes, you need to have a div with that id in your HTML. Vue needs to mount to some element. – Bert Apr 26 '17 at 23:46
Right. But since I'm setting `template: '
'` I'm not sure why I get that error. – KingKongFrog Apr 26 '17 at 23:47
@KingKongFrog No, don't make it the template. The template replaces the element already in your HTML. So, somewhere in your HTML (NOT in javascript) you have a `div#app`, then in your Vue initialization you have `{el: "#app", template: "
`, ...} – Bert Apr 26 '17 at 23:50

Can't get c3 chart to render using Vue.js

1 Answers1