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

Anyway to use with setup script?

thank you very much

Thank you, you literary saved me for my assignment

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

great work sir . I loved you video

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 = document.getElementById("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>

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

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

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

Great content !
I subscribed