This thing got so much easier to do now. I remember trying to do something like that in angular 1, years ago. Just need to read the documentation to see what else can be done. You saved me a lot of time, thanks for the video
Thanks for the video! I have found your channel not so long ago and I think you have some serious skills bro! Great video tutorials! Thanks again for the job you are doing!
Thank you so much for sharing this tutorial! After watching your video, I feel it is a lot easier to read the doc now! I am a beginner to programming and always feel difficult when reading API docs. Thanks again ❤
So I followed through and I am looking for a way that when you change data it reflects automatically without refreshing so I rendered setUserData inside useEffect and gave it UserData as dependency array but it did not work. can you help?
I am having this problem too. I am forced to use version 5 because everytime you use Link tag you get blank page even after using routes and Router and BrowserRouter
Great video... Just need little help, I am fetching data from backend successfully but unable to render it to the frontend. Any suggestions will be helpful
Hello, I installed react-chartjs2 but it gives code 500 error. I tried to install react native chart kit etc, but there is always this error. Why do you think it might be? In the error message it says it found react-chartjs2 in node modules folder. but it says main module cannot be resolved. and inside dist it says index cjs not found either. but when i go to node modules folder this file is there. I would be glad if you help Here is the full sentence. "However, this package itself specifies a `main` module field that could not be resolved"
I couldn't get the graphing to work. Getting this error in App.js: ReferenceError: Cannot access 'userData' before initialization, weird because everything was the same has what he wrote.
Good job bro. Hey I have a favor to ask, I recently completed Node and Express course and there was this filed in user model; isAdmin: true or false . can you create a frontend tutorial with MERN that will work in a way that if a user with isAdmin: true logs in they are directed to the admin dashboard but if a user with isAdmin: false proceed to the main webpage?
hey pedro thanks for the video , but i have little issue trying to use dynamic data from an api but is how the chart , is there anything i should do? thanks
Hi Pedro, verygood content...I have one question, I need for project on college create search trough years...example, I click on option button year 2020 and then get chart with resolved, rejected and total number of reported faults...is my idea feasible?
I have been facing some issues while adding chart components. My react version is 18 and also I tried in react v17, nothing works. Can you please help me how can I integrate chart in latest version of react..
Hi, Pedro. Thank you for great video. I can't install react-chartjs-2. I'm getting an error and I think it should be for my react version, I'm using react 18 and it was saying the react-chartjs-2 version 4.0.1 is for react earlier version. Can you help me?
In another place there was insturctions how to do so setDemoData was used. Now I think do we really need useState? Well I will see, cos type='line' didn't wokl via state (plain const works for react...) and I try to use plain Chart -tag, not etc.
This was a great video to get started with ChartJs in React! However, I am stuck on trying to change the default Chart settings so I can change my font. I read online to import {defaults} from react-chartjs-2 but such an import doesn't exist when I try. Any help would be much appreciated.
as always awesome content kindly can u make a video on react + gsap and make a cool web animation i see on youtuber there's no good video on this & there is some but outdated can u make one thankyou
Hey again Pedro, what a coincidence.. I just built a budget manager few days ago with these tools. Looking forward to see the tips on this video. 🙌🏻
Hope you enjoy it!
This thing got so much easier to do now. I remember trying to do something like that in angular 1, years ago. Just need to read the documentation to see what else can be done. You saved me a lot of time, thanks for the video
in my country we say "Danko". which means 'thank you'.
Saved my life of reading documentation. 🇿🇦🔥
Really enjoy how you get right to the point and don't dive too deep into styling which as you know is its own separate beast
Thanks for the video! I have found your channel not so long ago and I think you have some serious skills bro! Great video tutorials! Thanks again for the job you are doing!
I appreciate that!
Great video Pedro. Could you make a video on how you could let a user update the chart data?
I think that is by simply passing a dynamic data(as an array) gotten from the user as the data to the chart
Thank you so much for sharing this tutorial! After watching your video, I feel it is a lot easier to read the doc now! I am a beginner to programming and always feel difficult when reading API docs. Thanks again ❤
after wasting my day you thankfully saved my night...
happy coding thanks :)))
Thank you for this great tutorial! Helped me with a data visualization project that I'm working on. Keep up the great work!
Pedro I love you ! I was getting that error where nothing is showing on react app and you saved me 😍 Thanks a lot !
I am getting a TypeError undefined map. I imported Chart as ChartJS too. btw thanks for the video.
So I followed through and I am looking for a way that when you change data it reflects automatically without refreshing so I rendered setUserData inside useEffect and gave it UserData as dependency array but it did not work. can you help?
Excelente tutorial, y excellent English pronunciation, I'm native Spanish speakers and I got all of the explanations, thanks a lot my friend 😊
The only tutorial where the teacher is explaining like you were there with him during the recording
I am from India ur tutorial are very useful thank you bro:)
Happy to help
A great introduction to charting in React. Thanks, Pedro
{2022-12-17}
omg this was so helpful! Looking forward to your next video about ChartJS!
Amazing tutorial Pedro! Thank you
Straight to the point , Thank man
thank you so much, simple straight forward tutorial
Hi Pedro, great video !!!
btw where can we see the discord channel link?
Just added to the description!
Great stuff as always pedro
Glad you enjoyed it
thank you. your videos as been really helpful. thank you so much
Na moral mano, teus vídeos são mt bons e o teu sotaque/pronuncia é um dos melhores q já vi de br fazendo video em inglês.
This is fantastic - just subscribed! Thanks!
great work as always!
Appreciate that!
Pedro you JS Wizard ❤
thank you man really easy to understand
Thank you for this amazing tutorial .. and funny thing idk why i hear you say ear instead or year xD
Very good tutorial, thanks pedro
Thanks. Great tutorial. What snippets plugin are you using?
Pedro tech você é o melhor
What if we want to make two graphs one for userGain and one for userLoss and What if I want to fetch data using mysql
Thank you for this video. It helped me a lot.
GREAT VIDEO!!!! We want more!!! Thank you!
Great tutorial Pedro. Do you know why every time I use React Router v6, even from your own tutorial I always render a blank page? Thanks.
I am having this problem too. I am forced to use version 5 because everytime you use Link tag you get blank page even after using routes and Router and BrowserRouter
Can you guys share a snippet?
Yeah, can you share a snippet of your code here?
I deleted it because it wasnt working . Right now at work all day but will upload it at night sorry.
@@eshw23 no worries, will be here to help! Also, if you want to ask more questions, feel free to join our discord.
Awesome...i have connecting firebase 🔥keren rek
Thank you so much man this worked for me....
This is really nice, subscribed
Hey Pedro, will you please make same video but using Firestore v9? Thank you
I don't know how you and RUclips is reading my mind 🙏🏻 😊
Hahaha glad to hear!
Thank you for the video. how to add label on the chart section in pie chart
??
Thanks Pedro. It helps a lot.
thanks Pedro
thank you pedro.
Very Good! It1s very usefull! Thanks!
Thanks for the video, i was using the pie chart but i want to show the values inside of pie chart included of pie chart not exluded how to show them ?
Stop reading my mind bro.
Thanks
I can't hahaha
Mine Too
Thank you so much, I love you 😂😂❤❤
Super helpful!
Very helpful, thanks
Hi, Thanks 🙏 That's very cool 👌🌹 . please make more videos like this 🙏🙏🌹🌹 . Good luck 🙏
Great video... Just need little help, I am fetching data from backend successfully but unable to render it to the frontend. Any suggestions will be helpful
very nice tutorial. Thanks for sharing!
Hello, I installed react-chartjs2 but it gives code 500 error. I tried to install react native chart kit etc, but there is always this error. Why do you think it might be? In the error message it says it found react-chartjs2 in node modules folder. but it says main module cannot be resolved. and inside dist it says index cjs not found either. but when i go to node modules folder this file is there. I would be glad if you help
Here is the full sentence. "However, this package itself specifies a `main` module field that could not be resolved"
Great job man
Hey ! Thanks for the video, is there a way to unit test these charts using jest ? If yes, could you please explain it?
Hi, I can't see the chart.js dependency in my json so the package does not work. What should I do?
This is awesome! Really thank you😀🤗
Really great video. Thanks!!
I couldn't get the graphing to work. Getting this error in App.js: ReferenceError: Cannot access 'userData' before initialization, weird because everything was the same has what he wrote.
Good job bro. Hey I have a favor to ask, I recently completed Node and Express course and there was this filed in user model; isAdmin: true or false . can you create a frontend tutorial with MERN that will work in a way that if a user with isAdmin: true logs in they are directed to the admin dashboard but if a user with isAdmin: false proceed to the main webpage?
I have a video on protected routes if you are interested. However I can definitely do something like this!
@@PedroTechnologies I will appreciate bro
Great Video, Loved It !!! ❤✌
Thanks for quick help..
i have problem when using this on next.js typescirpt
hey pedro thanks for the video , but i have little issue trying to use dynamic data from an api but is how the chart , is there anything i should do? thanks
hi, why do you use useState, when you never actually set any state?
Please how do you hide the grid lines
Hi Pedro, thank you for you video. I have a question: It is possible to use react-chartjs-2 with react server components?
great video bro
what extension is that in your imports?
And thanks, I was wondering why my chart wouldnt display, I didnt have the Chart import! Many thanks
I have tried this but using TS and it was painful. Creating a chart with combined bars and lines was impossible for me.
how did you write rfce and get the function
thank you very much for this
Perfect !!!
Hi Pedro, verygood content...I have one question, I need for project on college create search trough years...example, I click on option button year 2020 and then get chart with resolved, rejected and total number of reported faults...is my idea feasible?
can we use pie chart for strings
Is scaling on y axis is done automatically or we have to set
I have been facing some issues while adding chart components. My react version is 18 and also I tried in react v17, nothing works. Can you please help me how can I integrate chart in latest version of react..
it was great! thank u!
Hi, Pedro. Thank you for great video. I can't install react-chartjs-2. I'm getting an error and I think it should be for my react version, I'm using react 18 and it was saying the react-chartjs-2 version 4.0.1 is for react earlier version. Can you help me?
Great video
Thank you so much
Great tutorial brother 🕺🏿🕺🏿
Thank you 🙌
Thank bro appriciate it
Hello Pedro, great tutorial. But I'm having the following problem "Uncaught SyntaxError: Unexpected token '
I had that too. Then I switched to react-app without typscript etc.
@@jhalmu yeah, I was using Vitejs to create the project. With create-react-app it worked fine.
@@birarr Same to me. "Sadly".
Anyone else getting a "missing class properties transform" error ?
"Line 6:20: 'setDemoData' is assigned a value but never used" so we don't need that?
In another place there was insturctions how to do so setDemoData was used. Now I think do we really need useState? Well I will see, cos type='line' didn't wokl via state (plain const works for react...) and I try to use plain Chart -tag, not etc.
Anyone have any idea how to change the y-axis to either $ or £ ?
not working i got problems.
good video
good vid
tnx
This was a great video to get started with ChartJs in React! However, I am stuck on trying to change the default Chart settings so I can change my font. I read online to import {defaults} from react-chartjs-2 but such an import doesn't exist when I try. Any help would be much appreciated.
Hey, not sure if u ever find a solution but im reading this just now..
const option = {
scales: {
x: {
ticks: {
font: {
family: "Work Sans",
size: 14,
weight: '500',
},
},
},
},
plugins: {
legend: {
display: true,
labels: {
font: {
family: "Work Sans",
size: 12,
},
},
},
tooltip: {
bodyFont: {
size: 12,
family: "Work Sans",
},
},
},
};
great
clap clap clap clap clap clap and like
🤟
Donut chart? 😅
as always awesome content kindly can u make a video on react + gsap and make a cool web animation i see on youtuber there's no good video on this & there is some but outdated can u make one thankyou