Using Chart.JS in React.JS - A Complete Tutorial (2020)

[@WornOffKeys]

🔥 Get the code here: github.com/AlexzanderFlores/ChartJS-in-React 🙋‍♂ Need help? Ask in our Discord community: wornoffkeys.com/discord

[@sureshmakwana8709]

7:04 cannot see the bar on web.... Makes me so angry and upset as I've followed all the steps he said I think I'll have to find some another video on KZbin plus very low voice's volume in the video which was very irritating too

[@ShivamSharma-rq9ne]

pin the comment which explains the version error. you instead has this promotional thing as pinned. one disliking the video only cause of your sheer negligence.

[@ranati2000]

@@sureshmakwana8709 same issue

[@jublirajshelton]

Need to use the following code in the latest version. import {Chart as ChartJS, BarElement, CategoryScale, LinearScale} from 'chart.js' ChartJS.register( CategoryScale, LinearScale, BarElement )

[@SuperSayiyajin]

Thanks. If you have problem about map or category not found. add this line to your bar component import { Chart as ChartJS } from 'chart.js/auto'

[@barncha]

You're a natural at teaching, thank you so much for this tutorial! It was a great help!

[@WornOffKeys]

Thank you and glad I could help!

[@ferdinand4881]

@@WornOffKeys hi can you do a tutorial on react-vis?

[@MikeCerna309]

Been looking for how to use chartsjs all night long and found your vid...very detailed, and a lot of patience plus good methodology to explain things. I learned a lot and got very interested into keep reading the documentation...thank you very much and keep up the good work! Regards from Lima, Peru! Ps. You just got a new subscriber :)

[@c4syner]

For anyone getting errors try this fix: npm install react-chartjs-2@2.9.0 npm install chart.js npm install react npm instal react-dom The various other "fixes" recommended here gave me random dependency errors as well as blank screens.

[@jennaprice5563]

Unfortunately this did not work and threw a ton of errors: Attempted import error: 'chart.js' does not contain a default export (imported as 'Chart') Here is my dependency list: "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "chart.js": "^3.9.1", "react": "^18.2.0", "react-chartjs-2": "^2.9.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },

[@yurikkkj3940]

man you literally save my life, i was trying this in like last 2 weeks but with your coment i made what i want, so thx man

[@afshinmoshrefi]

To make sure tutorial works, you have to force chart.js to install version 2.x - the instructions will default to installing chart.js version 3.x which is not compatible with react-chartjs-2. Following installation worked for me: npm install --save react-chartjs-2 chart.js@2.9.4

[@l3aIIin23]

Thank you!!!!

[@ajexzetia3878]

Thank you so much

[@vetrivel-yx2on]

This comment should be pinned Thank you

[@vetrivel-yx2on]

How did you find that chart js version is the issue? Could you please explain

[@afshinmoshrefi]

@@vetrivel-yx2on I read about the new release of chart.js 3 and that there were breaking changes specifically it no longer exports the chart class as a default export. That is when I looked into versioning and it turned out to be the issue.

[@dimabernada1809]

Excellent tutorial, thank you so much, essentially and very fast, one of the best tutorial I have ever seen

[@WornOffKeys]

Glad it helped!

[@sonalisahoo5953]

If your graph doesnt work, you can try out - yarn add react-chartjs-2@2.9.4 , It gives the prompt in terminal that 2.9.4 doesnt match, so then u could choose 2.9.0. And it works!

[@paramshendekar8163]

This tutorial works well with previous versions, now the documentation has changed and we need to do things differently than before. If you wish to follow this version, make sure you install the very same version

[@ritveak]

Did you get it running? Can you help?

[@siel1374]

npm uninstall react-chartjs-2 chart.js npm install --save react-chartjs-2@2.11.1 chart.js@2.9.4

[@SydAliHsn]

THANKS bor loooove youuu

[@siel1374]

@@SydAliHsn ♥️

[@ranati2000]

I am having three kind of different errors in console and the chart isnt showing: Errors: 1) Uncaught Error: "bar" is not a registered element. 2) Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. 3) The above error occurred in the component: My Code: import React from 'react' import { Bar } from 'react-chartjs-2' export const BarChart = () => { return( Bar Chart ) }

[@amirjosevelasquezaburdene4318]

Awesome video, thanks!!! Keep going

[@EminoMeneko]

Very cool. Well explained and I loved the bit about documentation. Too few people do this.

[@pshr2447]

i love chart js man data is beautiful

[@Dmitriy_Sentinel]

My English is poor. But what the author of the video said - I understood absolutely everything))

[@WornOffKeys]

Glad to hear that!

[@Dmitriy_Sentinel]

@@WornOffKeys Сan you tell me, my page is not refreshed when saving an App.js - Updates occur only when the restart project. As I understand it, it is default in React.js page reload and saving changes?

[@almirsilva838]

Very good! Very useful!

[@dalelanto895]

Hi can anyone help me uninstall react-chart-js@3.0.3 because i could not install version 2.9.3, it says could not resolve dependency peer chart.js@"^3.1.0" from react-chartjs-2@3.0.3, thank you in advance

[@cristinao2614]

could you resolve this ??

[@donatoalvarez3027]

Just install the v3 chartjs now works.

[@sheikhyabooti8960]

clearly the best

[@naumanshigri]

oakoran tong hay momo rozi. thank you very much

[@mohammadjavadaghazadehfard7873]

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

[@vivekknShots]

TypeError: Cannot read properties of undefined (reading 'map') is anyone getting this error

[@zalimbhaiofficial2840]

use ?.map

[@blackhoody3113]

Why my chart do not shows in chrome? I wrote code as you did and only got white screen. When trying to show some text like Hell World, it shows as it should. So what might be the problem here?

[@crashoverride-2024]

same problem, did you found the solution ?

[@EnaGena]

it doesnt work

[@leo-fv2nv]

Thank you so much 😍 😍 u really saved me.... As beginner it is really helpful.....

[@robinbreed2439]

great tutorial!

[@sergeos5]

What do you recommend to look so that the data can be taken from the SQL source?

[@Eclipse-san]

You can make a backend API that uses sequelize to return data. And you can then use axios to send a request to your API. Happy coding

[@sergeos5]

@@Eclipse-san can you help me in that question, my friend?

[@ramandamytv1193]

thank you so much! awesome tut!!

[@krishnadhingra2723]

great video! loved it!

[@hplaptop2286]

Hello If it's possible,could you please put videos in a dropdown box with options like weekly,monthly,yearly?

[@deepwebtube]

Thank you sir for this video! Simply invaluable!!!

[@pratikpowale9657]

Thank u so much brother!

[@Zahra-uc2xq]

really helpful thank you

[@jayakrishnad7318]

Very good explanation

[@petermashine1483]

i have error : " Uncaught TypeError: Cannot read properties of undefined (reading 'map') " . what does it mean?

[@devtom2060]

Looks simple, thanks!

[@SuperSayiyajin]

Can we create 3d bar(column) chart with using Chart.js?

[@afshinmoshrefi]

Thanks for the tutorial. It is excellent.

[@ChrisMochinskiMusic]

Very interesting - I'm certain my syntax matches but I'm having no luck on the font size around the 17-minutes mark. I'm flying my chart page into a parent page in React. I wonder if perhaps there's a parent font setting that's killing this option? The parent page is kind of convoluted. Thoughts? Thanks!

[@Nefarious_Production]

is it possible for you to make the channel specific commands to you're advanced command handler

[@WornOffKeys]

Yes, this is something I plan on adding to the new revamped command handler once it comes out

[@peaichunong3069]

Hi, thanks for this tutorial. It is very useful. May I know for the dataset, is that possible to have a range as data? Like from Jan-Sep, to make it something like a range chart or gantt chart? Is that possible?

[@GauChymTo]

year. I want to get into making soft on desktop because it offers more features but I have just been preferring the softow of mobile apps

[@Onomandah]

Thank you! We really appreciate it!

[@WornOffKeys]

No problem, glad the video helped!

[@ajbleas]

NOTE: HAVING ISSUES WITH "DEFAULT"? npm uninstall chart.js and run npm install chart.js@2.9 . THIS FIXED MINE

[@jackgong7658]

THANK YOU OMG

[@ShiyunLian]

You save my life

[@dalelanto895]

could not install --save react-chartjs-2 chart.js@2.9.4 it always says to me peer depency error, and whenever i try to force install it i get this other error : module not found can't resolve chart.js/auto, can anyone help me pls

[@dedx4094]

thanks!. really helped me in my project.

[@WornOffKeys]

Glad it helped!

[@darshang7133]

Hey how do i import CSV file and plot it ?

[@ItsNoahHi]

my chart renders multiple times. does anyone know why by any chance?

[@ajexzetia3878]

Thanks bro, your tutorial help me

[@erickgeneric]

Amazing. Thank you

[@IVIattyHD]

great vid thank you!

[@WornOffKeys]

Glad it helped!

[@subhamsaurabh3069]

great explanation 👍👍

[@WornOffKeys]

Glad you liked it!

[@nguyenminhkhoa5613]

Great course, but when I create 2nd and 3nd chart, its dont show "Lable name", its only show "undefined"

[@graziacassano9263]

Damn man! Finally a tutorial very well explained! Thank you so much. Can't wait to watch other videos. Do you have any on node and fs modules?

[@PIDOtomasyon]

07:06, I want to use mysql datas for generating charts in HTML page. not PHP. Urgent please. I can show mysql data in html table, but not convert to chart. Thank you so much.

[@WornOffKeys]

Hey, you will need to use a web server to populate the HTML page with your data from your MySQL server and then send that HTML page to the client. This is done in PHP or Node.JS typically.

[@PIDOtomasyon]

@@WornOffKeys I am using node.js, at app.js I am sending sql datas to second page as: (app.js) app.get('/chart',(req, res) => { let sql = `SELECT * FROM results`; let query = connection.query(sql, (err, rows) => { if(err) throw err; res.render('user_resultChart', { title : 'RAPORLAMA', users : rows }); }); }); I can response at second page as : (chart.ejs) How can I use in Chart. I want to convert to Chart. I need to use HTML page(Because I can't install php server on the PC) Thank you.

[@sureshmakwana8709]

7:04 cannot see the bar on web.... Makes me so angry and upset as I've followed all the steps he said I think I'll have to find some another video on KZbin plus very low voice's volume in the video which was very irritating too

[@soumyagarg4768]

Try doing yarn add react-chartjs-2@2.9.4 , then select 2.9.0 from the options. npm i chart.js

[@chandraroy8254]

This solved the same issue for me... import { Chart } from 'chart.js' Chart.defaults.plugins.legend.display = false

[@ibrahimacanada]

Good tutorial !!

[@RinatWOT]

Great video, thank you!

[@WornOffKeys]

Glad it helped!

[@mehdisheikh627]

thanks for veryyyy good comtent 😘😘😘😘😊😊😊😊😉😉😉😉✌✌✌✌

[@WornOffKeys]

Glad you liked it!

[@prakashd842]

Excellent

[@arshadrauff4549]

Thanks!!

[@yateshchhabra6224]

Hey mate, I am trying to make multi line graph using chart.js in which i want to add label above and at the left of the horizontal line in which some text is shown in that

[@manastripathi2407]

Amazing. subscribed.

[@WornOffKeys]

Thank you!

[@diegocueva4141]

PLease, I get linear graphic and not curved, do you know why?

[@chaitanyadani4273]

I am having issues with the bar chart. It is saying cannot read properties of undefined.(reading map).

[@dagi_works]

Same.

[@bekirs4240]

Download older version or use docs

[@유수정-v5q]

Thank you soooo much!

[@weblord2174]

I'm following these tutorial and I have everything working until I start adding the elements from Chart JS 2. They are simply not displaying.

[@koushiksherugar8680]

same

[@vikrantgupta7896]

Perfect

[@yuecheng3508]

how do you know the name is ''react-chartjs-2''? I cannot import it

[@hamidnaeimi2828]

npm install --save react-chartjs-2 chart.js

[@yuecheng3508]

@@hamidnaeimi2828 thanks!!

[@devcj8962]

How could you make it responsive for mobile?

[@timothyroy20111]

7:21 For some reason, I see a blank screen. Here's what my code looks like in the BarChart.js: import React from "react"; import { Bar } from "react-chartjs-2"; const BarChart = () => { return ( Some Dat ); }; export default BarChart;

[@LMKz1]

Background color is need

[@ganeshtarone1936]

Did you got the solution for this?

[@mariuszyszczarz5305]

Thanks!

[@WornOffKeys]

No problem!

[@rezaz7167]

5:04 what kind of extension does this code beautify-er? (adding space around 'Bar')

[@WornOffKeys]

That is the VSCode extension "Prettier"

[@gingerrcat]

Hi, how do you do this with data from api? :)

[@ferdinand4881]

Hi can you do a tutorial on react-vis?

[@charlesobasi1991]

Can you create a histogram with chartjs?

[@chrollo8483]

can you make a chart by using firebase data?

[@WornOffKeys]

In theory you should be able to make a chart with data from any source

[@chrollo8483]

@@WornOffKeys can you make a video tutorial?

[@mehedihasanridoy1588]

Great Video.. But need to update it for now.

[@viniciusfrasson4628]

How to fixed this -> Cannot read property ‘Defaults’ of undefined , I m using function components In reactJs

[@lajesfieldspotter4387]

You need version 2.9.4 of charts.js. 3.x not working for now

[@viniciusfrasson4628]

@@lajesfieldspotter4387 thanks

[@ivesscripts8876]

Early

[@sonalisahoo5953]

Hi, can i get the code pls?

[@masj7786]

not working!

[@vaalarivan_p]

15:00

[@victorete3]

CORS Policy ):

[@masj7786]

Another tutorial that as of now 2022 doesn't work. The 10th in a row. The person who will create a working React Chart js course will become rich.

[@JassarDev]

Well done 👏 Thank you!

[@WornOffKeys]

Glad it helped!