Nuxt.js ライブラリ「vue-chartjs」使用してグラフを作成する

## test-projectという名前で作成
npx create-nuxt-app test-project
cd test-project

npm install @nuxtjs/vuetify

modules: [    
    '@nuxtjs/vuetify'
  ],
  vuetify: {    
    theme: {
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c'
    }
  }

yarn add vue-chartjs chart.js

import Vue from 'vue';
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

Vue.component('line-chart', {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {        
        this.renderChart(this.chartData, this.options)
      }
});

plugins: [   
    {
      src: '@/plugins/line-chart',
      ssr: true,
    }
  ],

<template>
<v-app id="inspire">
    <div class="small">
        <line-chart :chart-data="datacollection"></line-chart>
        <div class="text-center">
            <v-btn  depressed small @click="fillData()">Randomize</v-btn>
        </div>    
    </div>
</v-app>
</template>

<script>
export default {
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Test Data2',
              backgroundColor: 'rgba(255, 100, 130, 0.2)',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Test Data2',
              backgroundColor: 'rgba(100, 130, 255, 0.2)',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
            , {
              label: 'Test Data3',
              backgroundColor: 'rgba(130, 255, 100, 0.2)',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
};
</script>
<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

yarn dev