Converting Vue Component to Vuetify Component

Question

I am using Vue+Vuetify. Never learnt Vue standlone went straight into the duo

I am trying to re-create a sparkline metric - Can be seen in this codepen "PageViews" (Source starts at line 30 in JS)

The issue: Vue standalone has a different method of registering components. I have attempted to re-jig the code and register the component according to Vuetify's rules. Normally a sparkline in Vuetify is simply called with <v-sparkline/>.

Despite my efforts I am stuck with the error: TypeError: "this.Chart is not a function".

What am I doing wrong?

My attempt: metric.vue

<template>
<div class="br2">
      <div class="pa3 flex-auto bb b--white-10">
        <h3 class="mt0 mb1 f6 ttu white o-70">{{ title }}</h3>
        <h2 class="mv0 f2 fw5 white">{{ value }}</h2>
      </div>
      <div class="pt2">
        <canvas></canvas>
      </div>
    </div>
</template>


<script>

  export default {

        props: ["title", "value"],


        data () {
            return {
                ctx: null,

            }
            },

   mounted () {

    this.ctx = this.$el.querySelector("canvas").getContext("2d");
    let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
    sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
    sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

    let data = {
      labels: ["A", "B", "C", "D", "E", "F"],
      datasets: [{
        backgroundColor: sparklineGradient,
        borderColor: "#FFFFFF",
        data: [2, 4, 6, 4, 8, 10]
      }]
    };

     this.Chart(this.ctx, {
      data: data,
      options: {
        elements: {
          point: {
            radius: 0
          }
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }]
        }
      }
    });
  }
}
</script>

Answer 1

you did not import Chart from chart.js

 <template>
      <div id="app">
        <div class="br2">
          <div class="pt2">
            <canvas></canvas>
          </div>
        </div>
      </div>
    </template>

    <script>
    import Chart from 'chart.js'
    export default {
      name: "App",
      data(){
        return{
          ctx: null
        }
      },
      created: function() {
        Chart.defaults.global.legend.display = false;
      },
      mounted: function() {
        this.ctx = this.$el.querySelector("canvas").getContext("2d");
        let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
        sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
        sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

        let data = {
          labels: ["A", "B", "C", "D", "E", "F"],
          datasets: [{
            backgroundColor: 'red',
            borderColor: "#FFFFFF",
            data: [2, 4, 6, 4, 8, 10]
          }]
        };

        Chart.Line(this.ctx, {
          data: data,
          options: {
            elements: {
              point: {
                radius: 0
              }
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            }
          }
        });
      }
    };
    </script>

    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>