vue-c3

    1.2.11 • Public • Published

    vue-c3

    vue-c3 is a reusable vue component for c3 charts

    forthebadge forthebadge forthebadge

    Install

    npm install --save vue-c3
     
    # and if it's not already installed: 
    npm install --save c3

    Usage

    In your vue-component:

    <template>
      <div>
        <vue-c3 :handler="handler"></vue-c3>
      </div>
    </template>
     
    <script>
      import Vue from 'vue'
      import VueC3 from 'vue-c3'
     
      export default {
        name: ...,
        components: {
          VueC3
        },
     
        data () {
          return {
            handler: new Vue()
          }
        }
      }
    </script>

    You can use the handler to send events to the vue-c3 component:

    To initialize the c3 chart call:

     
    <script>
      ...
      export default {
        name: ...,
     
        mounted () {
          // to init the graph call:
          const options = {
            data: {
              columns: [
                ['data1', 2, 4, 1, 5, 2, 1],
                ['data2', 7, 2, 4, 6, 10, 1]
              ],
              ...
            },
            ...
          }
          this.handler.$emit('init', options)
        }
      }
    </script>

    Events

    An overview of all events which can be submitted to the .$emit(name, ..) method:

    Name Parameters Description
    init options Use this method before anything else to generate the chart
    destroy - Used to destroy the chart
    dispatch api Access the c3 chart object directly to use the api

    For example you can use this.handler.$emit('dispatch', (chart) => chart.resize()) to resize the chart.

    For more information about c3 see the documentation http://c3js.org/reference.html.

    License

    Copyright (c) 2017 - 2018 Christoph Biering, Licensed under the MIT license.

    Install

    npm i vue-c3

    DownloadsWeekly Downloads

    3,881

    Version

    1.2.11

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • chryb