A very simple Vue wrapper for Chart

VueChart

This is a Vue chart component based on chart.js.

dependencies

• Vue
• Chart

setup

npm

npm install vuechart

ES module

Register the component globally.

import Vue from 'vue';
import VueChart from 'vuechart';

Vue.component(VueChart.name, VueChart);

or

Register the component in the scope of another instance.

import VueChart from 'vuechart';

export default {
  // ...
  components: {
    [VueChart.name]: VueChart,
  },
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg.com/vuechart"></script>

If Vue is detected, the component will be registered automatically.

usage

<vue-chart
  type="bar"
  :data="chartData"
  :options="{scales: {yAxes: [{ticks: {beginAtZero: true}}]}}"
  :update-config="{duration: 800, easing: 'easeOutBounce'}"
></vue-chart>

properties

GitHub