How to use c3 in vue js?

Question

I have been try from c3 site, but it does not work, this is my code

in template

<vue-c3 :handler="handler"></vue-c3>

then in script

<script>
import VueC3 from 'vue-c3'

export default {
  name: 'Dashboard',
  props: ['handler'],
  components:{ VueC3 },
  data() { 
    return {

    }
  },
  methods: {
    initChart(){
      const options = {
        data: {
          columns: [
            ['data1', 2, 4, 1, 5, 2, 1],
            ['data2', 7, 2, 4, 6, 10, 1]
          ],
        },
      }
      this.handler.$emit('init', options)
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

chart not rendered, what is wrong?

Are you getting any errors? Are you setting and passing the `handler` prop correctly? — thanksd, Apr 17 '19 at 13:41

score 0 · Answer 1 · answered Apr 17 '19 at 14:21

0

You missed

data () {
  return {
    handler: new Vue()
  }
}

from documentation https://github.com/chryb/vue-c3

answered Apr 17 '19 at 14:21

Emīls Gulbis

2,030
1
10
14

score 0 · Answer 2 · answered Sep 03 '20 at 07:32

0

I don't know if this solves your issue, but we get vue-c3 working with a very specific dependency setup:

"c3": "0.7.11"

Vue-c3 hasn't been updated in a while, but c3 itself is under active development again.

answered Sep 03 '20 at 07:32

Katinka Hesselink

3,961
4
20
26

How to use c3 in vue js?

2 Answers2