d3 as Vue component

First component are designed to help you from rewriting your code each and every time , so why not create a component for d3 that you can reuse each and everytime like below :

universal c3 component, c3.vue

<template><div :style="style" v-bind:class="class"  id="{{ randomid }}" ></div></template><script>import c3 from 'c3'module.exports = {  props: {     legend: {      type: Object,    },    size: {      type: Object,    },     colour: {      type: Object,     },   axis: {      type: Object,    },     bar: {      type: Object,    },    chartdata:{          type: Object,          default: function () {            return  {                    columns: [                        ['data1', 30, 200, 100, 400, 150, 250],                        ['data2', 50, 20, 10, 40, 15, 25]                    ]           }         }    },   class:{          type: Object,    },   styles: {          type: Object,    } },   created: function() {   },    ready: function(){       this.drawChart();    },    methods : {        drawChart: function () {            var self = this           var chart = c3.generate({                 bindto: document.getElementById(self.randomid) ,                 data: self.chartdata,                 size : self.size,                 colour : self.colour,                 legend : self.legend,                 bar : self.bar,                 axis : self.axis            });      }    },  computed: {     randomid: function () {      return _.uniqueId('c3_')    }  }}</script>

next register the component :

Vue.component('c3-chart', require('./c3.vue'))

now you can use this to create any chart you want , yes + gauges

<template><div> <c3-chart :chartdata="gauge.data" :colour="gauge.colour" :size="gauge.size"></c3-chart></div> </template><script>module.exports = {    props:  {    },    components:  {    },    data: function () {            return {             gauge : {                  data: {                     columns: [                       ['data', 91.4]                     ],                     type: 'gauge',                     onclick: function (d, i) { console.log("onclick", d, i); },                     onmouseover: function (d, i) { console.log("onmouseover", d, i); },                     onmouseout: function (d, i) {    console.log("onmouseout", d, i); }                },            color: {              pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],               threshold: {                 values: [30, 60, 90, 100]              }            },           size: {                height: 180               }             }          }     },    created: function() {    },    ready: function(){    },    methods : {    },    events: {   },   computed: {  }}</script>