Converting Vue Component to Vuetify Component - vue.js

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>