Vue warn/error => Unhandled error during execution of setup function & Unhandled error during execution of setup function with ChartJs and TypeScript

Viewed 59

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: enter image description here

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

0 Answers
Related