vue-chart.js

Chart.js for Vue

Install

$ npm i vue-chart.js

Chart Components

• BarChart
• LineChart
• RadarChart
• PieChart
• DoughnutChart
• PolarAreaChart

Common Chart Props

Name	Type	Default	Description
responsive	Boolean	true	resizes when the canvas container does
title	String	null	title text
title	Object	null	title configuration
width	Number	null	width of chart canvas
height	Number	null	height of chart canvas
labels	Array[string]	[]	labels of category axis

Example

<template>
<bar-chart :width="600" :height="300" :responsive="false" :labels="labels" :datasets="datasets" :options="options"></bar-chart>
</template>

<script>
import {BarChart} from 'vue-chart.js';

export default {
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        borderWidth: 1,
        hoverBackgroundColor: "rgba(220,220,220,0.2)",
        hoverBorderColor: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40],
        yAxisID: "y-axis-0",
      }, {
        label: "My Second dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        borderWidth: 1,
        hoverBackgroundColor: "rgba(220,220,220,0.2)",
        hoverBorderColor: "rgba(220,220,220,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
      }
    ],
    options: {}
  },
  components: {
    BarChart
  }
}
</script>