I'm doing something really basic, just a graph using ChartJs with typeScript... but I can't really see the mistake here ⇾ I'm almost just copying chartJs examples. Here's the code: Graph file:
<template>
<div>
<canvas id="mychart" width="400" height="400"></canvas>
</div>
</template>
<script lang="ts">
import { Chart, ChartItem } from "chart.js";
import { defineComponent } from "vue";
export default defineComponent({
name: "SimpleGraph",
setup() {
const ctx = document.getElementById("myChart") as HTMLCanvasElement;
// let chart: Chart<"line", number[], string>;
const myChart = new Chart(ctx.getContext("2d") as ChartItem, {
// The type of the chart you want to create.
type: "line",
// the data for our dataset
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
//options
});
myChart;
},
});
</script>
<style scoped></style>
About.vue => view where the chart is imported:
<template>
<div class="about">
<h1>This is an about page</h1>
<SimpleGraph />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import SimpleGraph from "@/components/SimpleGraph.vue";
export default defineComponent({
components: { SimpleGraph },
});
</script>
Here's a pic of the console error/warn:

I'm really lost with this one so any kind of help would be really appreciated