vuechartdeprecated

A simple wrapper for Chart.

Usage no npm install needed!

<script type="module">
  import vuechart from 'https://cdn.skypack.dev/vuechart';
</script>

README

VueChart

A simple wrapper for Chart.

dependencies

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 component.

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

properties

property type description
data Object The data of the chart.
options Object The configuration options of the chart of the current type.
type String The type of the chart. Changing the value will recreate the chart.
update-config Object The additional configuration for the update process.