https://github.com/biering/vue-c3

vue-c3 is a reusable vue component for c3 charts
https://github.com/biering/vue-c3

c3-chart c3js d3js npm-package vue-c3 vue-components vuejs

Last synced: 4 months ago
JSON representation

vue-c3 is a reusable vue component for c3 charts

• Host: GitHub
• URL: https://github.com/biering/vue-c3
• Owner: biering
• License: mit
• Created: 2017-07-24T08:49:02.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-03T16:26:47.000Z (about 6 years ago)
• Last Synced: 2024-05-29T03:11:59.423Z (9 months ago)
• Topics: c3-chart, c3js, d3js, npm-package, vue-c3, vue-components, vuejs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-c3
• Size: 414 KB
• Stars: 79
• Watchers: 10
• Forks: 17
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-c3

> vue-c3 is a reusable vue component for [c3](https://github.com/c3js/c3) charts

[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)

[![forthebadge](http://forthebadge.com/images/badges/made-with-vue.svg)](http://forthebadge.com)

[![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com)

## Install

```bash

npm install --save vue-c3

# and if it's not already installed:

npm install --save c3

```

## Usage

In your vue-component:

```vue

  


    

  


  import Vue from 'vue'

  import VueC3 from 'vue-c3'

  export default {

    name: ...,

    components: {

      VueC3

    },

    data () {

      return {

        handler: new Vue()

      }

    }

  }

```

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

To initialize the c3 chart call:

```vue

  ...

  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)

    }

  }

```

### Events

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

|Name|Parameters|Description|

|:--:|:--:|:--|

|`init`|[options](http://c3js.org/reference.html)|Use this method before anything else to generate the chart|

|`destroy`|-|Used to destroy the chart|

|`dispatch`|[api](http://c3js.org/reference.html#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](http://c3js.org/reference.html).

## License

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