1npm install vue-chartjs chart.js --save
2

1import { Bar } from 'vue-chartjs'
2
3export default {
4  extends: Bar,
5  props: ['data', 'options'],
6  mounted () {
7    this.renderChart(this.data, this.options)
8  }
9}
10

1<template>
2  <div class="container">
3    <bar-chart :data="barChartData" :options="barChartOptions" :height="200" />
4  </div>
5</template>
6
7<script>
8import BarChart from '~/components/BarChart'
9
10const chartColors = {
11  red: 'rgb(255, 99, 132)',
12  orange: 'rgb(255, 159, 64)',
13  yellow: 'rgb(255, 205, 86)',
14  green: 'rgb(75, 192, 192)',
15  blue: 'rgb(54, 162, 235)',
16  purple: 'rgb(153, 102, 255)',
17  grey: 'rgb(201, 203, 207)'
18};
19
20export default {
21  data() {
22    return {
23      barChartData: {
24        labels: ['Jan', 'Feb', 'Mar'],
25        datasets: [
26          {
27            label: 'Income',
28            // backgroundColor: ["red", "orange", "yellow"],
29            backgroundColor: [chartColors.red, chartColors.orange, chartColors.yellow],
30            data: [10, 15, 20]
31          }
32        ]
33      },
34      barChartOptions: {
35        responsive: true,
36        legend: {
37          display: false,
38        },
39        title: {
40          display: true,
41          text: 'Monthly Income'
42        },
43        scales: {
44          yAxes: [
45            {
46              ticks: {
47                beginAtZero: true
48              }
49            }
50          ]
51        }
52      }
53    }
54  },
55  components: {
56    BarChart
57  }
58}
59</script>
60