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!
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?
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 ❤
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 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
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.
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
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?
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
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, 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?
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
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
in my country we say "Danko". which means 'thank you'.
Saved my life of reading documentation. 🇿🇦🔥
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!
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?
after wasting my day you thankfully saved my night...
happy coding thanks :)))
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 ❤
Pedro I love you ! I was getting that error where nothing is showing on react app and you saved me 😍 Thanks a lot !
Thank you for this great tutorial! Helped me with a data visualization project that I'm working on. Keep up the great work!
Excelente tutorial, y excellent English pronunciation, I'm native Spanish speakers and I got all of the explanations, thanks a lot my friend 😊
I am getting a TypeError undefined map. I imported Chart as ChartJS too. btw thanks for the video.
omg this was so helpful! Looking forward to your next video about ChartJS!
The only tutorial where the teacher is explaining like you were there with him during the recording
Straight to the point , Thank man
A great introduction to charting in React. Thanks, Pedro
{2022-12-17}
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
I am from India ur tutorial are very useful thank you bro:)
Happy to help
thank you so much, simple straight forward tutorial
Amazing tutorial Pedro! Thank you
Great stuff as always pedro
Glad you enjoyed it
thank you. your videos as been really helpful. thank you so much
This is fantastic - just subscribed! Thanks!
Pedro tech você é o melhor
thank you man really easy to understand
great work as always!
Appreciate that!
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.
GREAT VIDEO!!!! We want more!!! Thank you!
Very good tutorial, thanks pedro
Thanks Pedro. It helps a lot.
This is really nice, subscribed
Pedro you JS Wizard ❤
Thank you for this video. It helped me a lot.
Very Good! It1s very usefull! Thanks!
Thank you so much man this worked for me....
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
Really great video. Thanks!!
Awesome...i have connecting firebase 🔥keren rek
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 ?
Thank you so much, I love you 😂😂❤❤
Super 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"
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.
Very helpful, thanks
Great Video, Loved It !!! ❤✌
thank you pedro.
This is awesome! Really thank you😀🤗
very nice tutorial. Thanks for sharing!
Great job man
thanks Pedro
Hi Pedro, great video !!!
btw where can we see the discord channel link?
Just added to the description!
Thanks. Great tutorial. What snippets plugin are you using?
Thank you for this amazing tutorial .. and funny thing idk why i hear you say ear instead or year xD
it was great! thank u!
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.
Thanks for quick help..
Hi, I can't see the chart.js dependency in my json so the package does not work. What should I do?
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, Thanks 🙏 That's very cool 👌🌹 . please make more videos like this 🙏🙏🌹🌹 . Good luck 🙏
i have problem when using this on next.js typescirpt
Thank you for the video. how to add label on the chart section in pie chart
??
I don't know how you and UA-cam is reading my mind 🙏🏻 😊
Hahaha glad to hear!
Stop reading my mind bro.
Thanks
I can't hahaha
Mine Too
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
hi, why do you use useState, when you never actually set any state?
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
Hi Pedro, thank you for you video. I have a question: It is possible to use react-chartjs-2 with react server components?
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..
how did you write rfce and get the function
Please how do you hide the grid lines
Hey Pedro, will you please make same video but using Firestore v9? Thank you
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?
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
Is scaling on y axis is done automatically or we have to set
Hey ! Thanks for the video, is there a way to unit test these charts using jest ? If yes, could you please explain it?
thank you very much for this
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 bro
can we use pie chart for strings
I have tried this but using TS and it was painful. Creating a chart with combined bars and lines was impossible for me.
Thank you so much
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".
Perfect !!!
Great video
"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.
Great tutorial brother 🕺🏿🕺🏿
Thank you 🙌
Anyone else getting a "missing class properties transform" error ?
not working i got problems.
Anyone have any idea how to change the y-axis to either $ or £ ?
good video
good vid
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",
},
},
},
};
English Accent OMG👻
great
tnx
🤟
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