Vue.js + C3.js

chart.vue

<script>
import { debounce, cloneDeep, defaultsDeep } from 'lodash'
import c3 from 'c3'

require('c3/c3.css')

export default {
  name: 'c3-chart',
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    data: {
      handler: 'reload',
      deep: true
    }
  },
  methods: {
    getArgs () {
      const data = this.getData()
      const config = this.getConfig()
      return cloneDeep({ data, ...config })
    },
    getData () {
      return cloneDeep(this.data)
    },
    getConfig () {
      const config = cloneDeep(this.config)
      const axis = {
        x: {
          type: 'category',
          padding: {
            left: 0,
            right: 0
          },
          tick: {
            multiline: true
          }
        }
      }

      return defaultsDeep({ axis }, config)
    },
    update: debounce(function update () {
      const data = this.getData()
      this.$chart.load(data)
      this.$emit('update', data)
    }, 500),
    reload: debounce(function reload () {
      this.$emit('reloading')
      this.$chart.unload()
      this.$nextTick(() => {
        this.update()
      })
    }, 700)
  },
  mounted () {
    const args = this.getArgs()

    this.$chart = c3.generate({
      bindto: this.$refs.root,
      ...args
    })

    this.$emit('init', args)
  },
  beforeDestroy () {
    this.$chart = this.$chart.destroy()
  }
}
</script>

<template>
  <div ref="root"></div>
</template>

Good work. Thanks for sharing.