CODEWITHSUNDEEP
d3.jsvue.jsvuejs2c3.js
KingKongFrog
KingKongFrog

Reputation: 14419

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

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();
                            }
                        }
                    }
                }
            }
        });
    }
});

Upvotes: 2

Views: 2586

Answers (1)

Bert
Bert

Reputation: 82469

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.

Upvotes: 2

Related Questions