There's already a ton of videos that goes into detail on Chart.js - check out this channel - th-cam.com/users/ChartJS-tutorials - implementing it in vue.js is basically the same once you have the chart.js vue npm package installed.
Any idea how to use the onClick callback to find which point was clicked upon on the chart. I am using . onClick only returns the actual x and y value of the canvas but not the data point
@@animaline I'll be creating the video tutorial soon, but I have finished the code where you're able to look up stock symbols and show a 1 year 5 year and 1 month price history chart using chart.js. Code is here if you want to take a look - github.com/simonjsuh/practice9-stock-price-history-app/tree/Stock-Lookup-Code-Complete-(Before-TH-cam-Tutorial)
Very helpful and simple. Thanks a lot!
Dude u was struggling for hours to make it work with vue , thank you !
Awsome video, thank you for sharing this information!
Really work for me, thanks a lot bro
Thank you, you literary saved me for my assignment
thank you very much
It should be amazing if a full video about chart js create
There's already a ton of videos that goes into detail on Chart.js - check out this channel - th-cam.com/users/ChartJS-tutorials - implementing it in vue.js is basically the same once you have the chart.js vue npm package installed.
great work sir . I loved you video
Great content !
I subscribed
Thanks! :)
Any idea how to use the onClick callback to find which point was clicked upon on the chart. I am using . onClick only returns the actual x and y value of the canvas but not the data point
Hey SImon, could you show us how to do this but while using an API we created?
I'm preparing a tutorial on using a stock price history lookup api to use with Chart.js. Or do you mean creating an api from scratch too? lol
@@SimonSuh stock price is a great option !
@@animaline I'll be creating the video tutorial soon, but I have finished the code where you're able to look up stock symbols and show a 1 year 5 year and 1 month price history chart using chart.js. Code is here if you want to take a look - github.com/simonjsuh/practice9-stock-price-history-app/tree/Stock-Lookup-Code-Complete-(Before-TH-cam-Tutorial)
@@SimonSuh weird, I get a 404
oops, I had repository to private. I changed it to public, you should be able to access it now.
Anyway to use with setup script?
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')
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;
});
did you get it?
@@nikhils7583 Yes! I got it