Build HTML5 Canvas Charts Using Vue.js And Chart.js

Description:

Just another Vue.js wrapper for the Chart.js that lets you create HTML5 charts using canvas.

Supports chart types: line, bar, donut, pie, and radar.

Basic usage:

1. Install and import the component.

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

2. Register the component.

Vue.component(VueChart.name, VueChart);
// or
export default {
  components: {
    [VueChart.name]: VueChart,
  },
};

3. Insert the chart component in your app template.

<vue-chart
  style="width: 800px; height: 600px;"
  :data="chartData"
  :options="{scales: {yAxes: [{ticks: {beginAtZero: true}}]}}"
  :update-config="{duration: 2000, easing: 'easeOutBounce'}"
  type="bar"
/>

Preview:

Build HTML5 Canvas Charts Using Vue.js And Chart.js

Download Details:

Author: SeregPie

Live Demo: https://seregpie.github.io/VueChart/

Download Link: https://github.com/SeregPie/VueChart/archive/master.zip

Official Website: https://github.com/SeregPie/VueChart

Install & Download:

# NPM
$ npm install @seregpie/vue-chart --save

You Might Be Interested In:

Add Comment