kevinongko / vue-chart-js

Chart.js wrapper component based on Vue.js

vue-chart-js

Chart.js wrapper component based on Vue.

Works with Vue 2.*

Installation

Install via CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-chart-js"></script>

<script>
  Vue.use(VueChart.default)
</script>

Install via NPM

$ npm install vue-chart-js --save

Register as Component

import Vue from 'vue'
import VueChart from 'vue-chart-js'

export default {
  name: 'App',

  components: {
    VueChart
  }
}

Register as Plugin

import Vue from 'vue'
import VueChart from 'vue-chart-js'

Vue.use(VueChart)

Usage

<template>
  <vue-chart type="bar" :data="chartData"></vue-chart>
</template>

<script>
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]
            }
        ]
    }
  }),
}
</script>

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

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 😃

• One-time donation via Paypal

vue-chart-js's Issues

How to update chart when data prop changes?

I've read through the discussions in the following issues but they did not help resolve my problem: #10, #7.

Here is an example on my issue on Code Sandbox: https://codesandbox.io/s/6w9mjky30w.

As you can see, I use buttons to change the data prop that is passed to vue-chart. The data is set to a new object if a different button is pressed, which is verified by the watcher I've set up.

If I'm passing a new data object to vue-chart, why, then, does the chart not update?

ask

how to set minimum value??

Send dispatch or emit from Chart to parent view

How can I send some data from the chart to a parente view?

Option"s" object - small typo

Hi, there is a small typo in the createChart method causing the options object not getting passed correctly.

I fixed it here:
s-oehding@f2f121a

Specific props for datasets

Component render 4 times

When I try to load a chart component it render 4 times always enter 4 time in the created, mounted, beforeCreate, and beforeMount

not updating after query

after i query and put the data to datasets data , i can only see the bars updated after i clicked on the labels. ,is it possible to execute the .update() from my component?

Chart not updating when data changes

When I update the data for the chart, the tooltip on the chart displays the correct data however the chart doesn't. I am using a radar chart.

How can I handle click events on the chart °

I have tryed all ways but none seem to work

Props are missing when dataset is changed

Hi! First of all, great work here.

I'm having a weird issue when I change the dataset. For some reason the property hash gets overwritten.

Do you have any idea why this is happening?

Thanks

color per chart

hello,

How can I define a color for each component of the graphic?

thanks