Package Exports

@seregpie/vue-chart

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@seregpie/vue-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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

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.