Press "Enter" to skip to content

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

VueChart is a simple Chart.js wrapper that allows you to create HTML5 charts using a canvas. Supports chart types: line, bar, pie, pie, and radar.

vue chartjs example, vue js bar chart example, vue chartjs line chart, vue chart library, vue chartjs pie chart, canvas js dynamic chart, react charts, canvasjs chart example

How to make use of it:

Install and download:

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

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 graph component into your application template.

<vue-chart
  style="width: 800px; height: 600px;"
  :data="chartData"
  :options="{scales: {yAxes: [{ticks: {beginAtZero: true}}]}}"
  :update-config="{duration: 2000, easing: 'easeOutBounce'}"
  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.

creating html5 canvas charts, VueChart Plugin/Github, chart js examples, create graph in html code


See Demo And Download

Official Website(SeregPie): Click Here

This superior jQuery/javascript plugin is developed by SeregPie. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.