https://github.com/kevinongko/vue-chart-js

Chart.js wrapper component based on Vue.js
https://github.com/kevinongko/vue-chart-js

chart chartjs vue wrapper

Last synced: 19 days ago
JSON representation

Chart.js wrapper component based on Vue.js

• Host: GitHub
• URL: https://github.com/kevinongko/vue-chart-js
• Owner: kevinongko
• License: mit
• Created: 2017-02-13T04:37:07.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-12T02:53:12.000Z (almost 7 years ago)
• Last Synced: 2024-10-12T09:11:45.665Z (about 1 month ago)
• Topics: chart, chartjs, vue, wrapper
• Language: JavaScript
• Homepage:
• Size: 169 KB
• Stars: 34
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-chart-js

[![npm](https://img.shields.io/npm/v/vue-chart-js.svg)](https://www.npmjs.com/package/vue-chart-js)

[![npm](https://img.shields.io/npm/dt/vue-chart-js.svg)](https://www.npmjs.com/package/vue-chart-js)

[![npm](https://img.shields.io/npm/dm/vue-chart-js.svg)](https://www.npmjs.com/package/vue-chart-js)

[![npm](https://img.shields.io/npm/l/vue-chart-js.svg)](http://opensource.org/licenses/MIT)

[Chart.js](http://www.chartjs.org/) wrapper component based on [Vue](https://vuejs.org/).

**Works with Vue 2.***

## Installation

### Install via CDN

```html

  Vue.use(VueChart.default)

```

### Install via NPM

```sh

$ npm install vue-chart-js --save

```

#### Register as Component

```js

import Vue from 'vue'

import VueChart from 'vue-chart-js'

export default {

  name: 'App',

  components: {

    VueChart

  }

}

```

#### Register as Plugin

```js

import Vue from 'vue'

import VueChart from 'vue-chart-js'

Vue.use(VueChart)

```

## Usage

```vue

  

import VueChart from 'vue-chart-js'

export default {

  name: 'App',

  components: {

    VueChart

  },

  data: () => ({

    chartData: {

        labels: ['Item 1', 'Item 2', 'Item 3'],

        datasets: [

            {

                label: 'Component 1',

                data: [10, 20, 30]

            },

            {

                label: 'Component 2',

                data: [20, 30, 40]

            }

        ]

    }

  }),

}

```

## Props

|Props|Description|Type|Required|

|-----|-----------|----|--------|

|type|Chart.js type|String|true|

|data|Chart.js datasets|Object|true|

|options|Chart.js options|Object|false|

|width|Chart width|Number|false|

|height|Chart height|Number|false|

## License

Vue-Chart-Js is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)

## Support

Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks :smiley:

- [One-time donation via Paypal](https://www.paypal.me/kevinongko)