React ChartJS Tutorial - Introduction To ChartJS

[@filipevalentegomes2383]

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

[@shinobi_coder88]

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. 🙌🏻

[@PedroTechnologies]

Hope you enjoy it!

[@michaelhuskey2608]

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

[@mandlankosi2160]

in my country we say "Danko". which means 'thank you'. Saved my life of reading documentation. 🇿🇦🔥

[@ВолодимирПриходько-л2л]

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!

[@PedroTechnologies]

I appreciate that!

[@guillermowars7635]

Excelente tutorial, y excellent English pronunciation, I'm native Spanish speakers and I got all of the explanations, thanks a lot my friend 😊

[@headspace6457]

Thank you for this great tutorial! Helped me with a data visualization project that I'm working on. Keep up the great work!

[@louislecouturier]

Pedro I love you ! I was getting that error where nothing is showing on react app and you saved me 😍 Thanks a lot !

[@chi-the-apple]

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 ❤

[@onkarjoshi8811]

after wasting my day you thankfully saved my night... happy coding thanks :)))

[@apeiron4409]

omg this was so helpful! Looking forward to your next video about ChartJS!

[@maxwelochieng7658]

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?

[@kalahari8295]

The only tutorial where the teacher is explaining like you were there with him during the recording

[@nabiha3358]

Great video Pedro. Could you make a video on how you could let a user update the chart data?

[@cumeneth7996]

I think that is by simply passing a dynamic data(as an array) gotten from the user as the data to the chart

[@Pareshbpatel]

A great introduction to charting in React. Thanks, Pedro {2022-12-17}

[@enfoshorts]

Straight to the point , Thank man

[@uditgupta3429]

I am getting a TypeError undefined map. I imported Chart as ChartJS too. btw thanks for the video.

[@rathishr6037]

I am from India ur tutorial are very useful thank you bro:)

[@PedroTechnologies]

Happy to help

[@tugrulerdemdogru]

Amazing tutorial Pedro! Thank you

[@jakemcinerney865]

This is fantastic - just subscribed! Thanks!

[@Faatihahmed]

Great stuff as always pedro

[@PedroTechnologies]

Glad you enjoyed it

[@yuritalinda]

GREAT VIDEO!!!! We want more!!! Thank you!

[@s.bamahfoodh]

thank you so much, simple straight forward tutorial

[@444ous]

Pedro you JS Wizard ❤

[@marcola4767]

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.

[@kyokyokyokyokyokyokyo]

Pedro tech você é o melhor

[@tomo6723]

great work as always!

[@PedroTechnologies]

Appreciate that!

[@abouyousuf00]

Very good tutorial, thanks pedro

[@zylascope]

Thanks. Great tutorial. What snippets plugin are you using?

[@oghenefejiroprinceimene6090]

thank you. your videos as been really helpful. thank you so much

[@faluyiajibola221]

This is really nice, subscribed

[@hi-tk4hu]

thank you man really easy to understand

[@albordignon]

Thanks Pedro. It helps a lot.

[@gaborvaszi3234]

Thank you for this video. It helped me a lot.

[@chesnelnicolas8079]

Hi Pedro, great video !!! btw where can we see the discord channel link?

[@PedroTechnologies]

Just added to the description!

[@eshw23]

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.

[@maxwelochieng7658]

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

[@ankurprajapati3799]

Can you guys share a snippet?

[@PedroTechnologies]

Yeah, can you share a snippet of your code here?

[@eshw23]

I deleted it because it wasnt working . Right now at work all day but will upload it at night sorry.

[@PedroTechnologies]

@@eshw23 no worries, will be here to help! Also, if you want to ask more questions, feel free to join our discord.

[@shubhamsinghvi9338]

Great Video, Loved It !!! ❤✌

[@InnoViewIndoTech]

Awesome...i have connecting firebase 🔥keren rek

[@poojagarva]

very nice tutorial. Thanks for sharing!

[@ThColinPereira]

Super helpful!

[@Kunal-jp8tn]

Thank you so much man this worked for me....

[@Simon-kj7on]

Hey Pedro, will you please make same video but using Firestore v9? Thank you

[@simpleciscovoicetutorials79]

Really great video. Thanks!!

[@EanasEanu]

Thank you for the video. how to add label on the chart section in pie chart ??

[@Hauang-cf8lm]

Thank you so much, I love you 😂😂❤❤

[@saidmaroc8448]

thanks Pedro

[@Ashishpaunarkar1]

Hey ! Thanks for the video, is there a way to unit test these charts using jest ? If yes, could you please explain it?

[@IllBecomeEngineer]

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

[@almirsilva838]

Very Good! It1s very usefull! Thanks!

[@EmptyNonsens]

Great job man

[@greeneffel]

This is awesome! Really thank you😀🤗

[@MrSaint-ch6xn]

I don't know how you and KZbin is reading my mind 🙏🏻 😊

[@PedroTechnologies]

Hahaha glad to hear!

[@richardwilliam7030]

Stop reading my mind bro. Thanks

[@PedroTechnologies]

I can't hahaha

[@tahaimran24]

Mine Too

[@mohammadjavadaghazadehfard7873]

Hi, Thanks 🙏 That's very cool 👌🌹 . please make more videos like this 🙏🙏🌹🌹 . Good luck 🙏

[@k303k]

thank you pedro.

[@AkashYadav-tc2lo]

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 ?

[@jscwanc30]

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"

[@ohiwantyoutobelieve]

Very helpful, thanks

[@Coder-Journey]

Thank you for this amazing tutorial .. and funny thing idk why i hear you say ear instead or year xD

[@paneurhythmie]

Hi Pedro, thank you for you video. I have a question: It is possible to use react-chartjs-2 with react server components?

[@maxwelochieng7658]

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?

[@PedroTechnologies]

I have a video on protected routes if you are interested. However I can definitely do something like this!

[@maxwelochieng7658]

@@PedroTechnologies I will appreciate bro

[@ahmedhanif5055]

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

[@FULLUPE1]

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

[@mubashir9659]

Thanks for quick help..

[@andreespinoza5902]

great video bro

[@ibrahimacanada]

Perfect !!!

[@haciendadad]

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.

[@p1k1m4ru]

it was great! thank u!

[@silasu36779]

Hi, I can't see the chart.js dependency in my json so the package does not work. What should I do?

[@tsarm___]

i have problem when using this on next.js typescirpt

[@siriusFish1]

Great video

[@hylianmike1275]

thank you very much for this

[@dawarlatif3832]

[@vikasbhatia6388]

Is scaling on y axis is done automatically or we have to set

[@mil0s251]

hi, why do you use useState, when you never actually set any state?

[@bazz6932]

Please how do you hide the grid lines

[@sarowaralam8993]

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..

[@kruno25]

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?

[@MarcosEsqueda]

I have tried this but using TS and it was painful. Creating a chart with combined bars and lines was impossible for me.

[@mofe620]

Thank you so much

[@artnevka779]

Thank bro appriciate it

[@anuanusha73]

can we use pie chart for strings

[@AnasLazar-d6v]

how did you write rfce and get the function

[@TheZayzoo]

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

[@npcdusun]

Great tutorial brother 🕺🏿🕺🏿

[@PedroTechnologies]

Thank you 🙌

[@amirsalehi3643]

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?

[@birarr]

Hello Pedro, great tutorial. But I'm having the following problem "Uncaught SyntaxError: Unexpected token '

[@jhalmu]

I had that too. Then I switched to react-app without typscript etc.

[@birarr]

@@jhalmu yeah, I was using Vitejs to create the project. With create-react-app it worked fine.

[@jhalmu]

@@birarr Same to me. "Sadly".

[@Brogle288]

good vid

[@soumelee5661]

good video

[@md.mohiulislam6516]

tnx

[@KondzioTVstudio]

not working i got problems.

[@jhalmu]

"Line 6:20: 'setDemoData' is assigned a value but never used" so we don't need that?

[@jhalmu]

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.

[@azanshaikh7825]

Anyone else getting a "missing class properties transform" error ?

[@syedaoufaq]

great

[@chasec4897]

Anyone have any idea how to change the y-axis to either $ or £ ?

[@urmirahmanfiona]

🤟

[@tomoko-nofake7463]

clap clap clap clap clap clap and like

[@onurcanisler]

English Accent OMG👻

[@srinivas1273]

👍

[@shivaramr1170]

Donut chart? 😅