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