github.com/seregpie/vuechart

VueChart

A simple wrapper for Chart.js.

Works for Vue 2 & 3.

dependencies

• VueDemi

setup

npm

npm i @seregpie/vue-chart

import VueChart from '@seregpie/vue-chart';

browser

<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/chart.js@3"></script>
<script src="https://unpkg.com/@seregpie/vue-chart"></script>

The module is globally available as VueChart.

usage

Register the component globally.

import {createApp} from 'vue';
import VueChart from '@seregpie/vue-chart';

let app = createApp({/*...*/});
app.component(VueChart.name, VueChart);
app.mount('body');

or

Register the component locally.

import VueChart from '@seregpie/vue-chart';

export default {
  components: {
    VueChart,
  },
  // ...
};

<vue-chart
  :data="chartData"
  :options="{scales: {y: {beginAtZero: true}}}"
  style="width: 800px; height: 600px;"
  type="bar"
/>

properties

name	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.
updateMode	String	The mode for the update process.