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