How to install and use Chart.js in Vue.js 3

0:00 Intro
7:45 Setting up the pie/doughnut chart
8:54 Setting up the line chart

[guestofallah]

Dude u was struggling for hours to make it work with vue, thank you !

[run.all.theroad]

Very helpful and simple. Thanks a lot!

[aidenpeace]

Awsome video, thank you for sharing this information!

[sachawicky]

Thank you, you literary saved me for my assignment

[MahbuburRahman-ucnp]

Any idea how to use the onClick callback to find which point was clicked upon on the chart. I am using <script setup>. onClick only returns the actual x and y value of the canvas but not the data point

[amirtorabi]

It should be amazing if a full video about chart js create

[animaline]

Hey SImon, could you show us how to do this but while using an API we created?

[Develop]

HI @simon Suh,

I am geting an error when I am using composition Api using Vue 3.

TypeError: Cannot read properties of null (reading 'getContext')

<script setup>
import { onMounted } from "vue";
import Chart from "chart.js/auto";
const canvas =
const ctx = canvas.getContext("2d");
onMounted(() => {
const myChart = new Chart(ctx, {
type: "bar",
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,
},
},
},
});
myChart;
});
</script>
<template>
<canvas id="myChart" width="400" height="400"></canvas>
</template>