1.1.0 • Published 3 years ago

@seregpie/vue-chart v1.1.0

Weekly downloads
160
License
MIT
Repository
github
Last release
3 years ago

VueChart

A simple wrapper for Chart.js.

Works for Vue 2 & 3.

dependencies

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

nametypedescription
dataObjectThe data of the chart.
optionsObjectThe configuration options of the chart of the current type.
typeStringThe type of the chart. Changing the value will recreate the chart.
updateModeStringThe mode for the update process.