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

@sureshmakwana8709

2 жыл бұрын

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 KZread plus very low voice's volume in the video which was very irritating too

@ShivamSharma-rq9ne

2 жыл бұрын

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

2 жыл бұрын

@@sureshmakwana8709 same issue

@jublirajshelton

2 жыл бұрын

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 )

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 :)

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

@WornOffKeys

3 жыл бұрын

Thank you and glad I could help!

@ferdinand4881

2 жыл бұрын

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

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

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

@WornOffKeys

2 жыл бұрын

Glad it helped!

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'

Awesome video, thanks!!! Keep going

Looks simple, thanks!

Very good! Very useful!

great video! loved it!

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

great tutorial!

thank you so much! awesome tut!!

Amazing. Thank you

Thank you! We really appreciate it!

@WornOffKeys

3 жыл бұрын

No problem, glad the video helped!

Thanks for the tutorial. It is excellent.

Very good explanation

clearly the best

really helpful thank you

great vid thank you!

@WornOffKeys

3 жыл бұрын

Glad it helped!

Thank u so much brother!

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

Great video, thank you!

@WornOffKeys

3 жыл бұрын

Glad it helped!

i love chart js man data is beautiful

Well done 👏 Thank you!

@WornOffKeys

2 жыл бұрын

Glad it helped!

thanks!. really helped me in my project.

@WornOffKeys

3 жыл бұрын

Glad it helped!

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

Good tutorial !!

Amazing. subscribed.

@WornOffKeys

3 жыл бұрын

Thank you!

Thanks bro, your tutorial help me

Thank you soooo much!

great explanation 👍👍

@WornOffKeys

3 жыл бұрын

Glad you liked it!

Excellent

oakoran tong hay momo rozi. thank you very much

Thanks!!

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

2 жыл бұрын

could you resolve this ??

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!

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 ) }

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!

Perfect

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

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?

Thanks!

@WornOffKeys

3 жыл бұрын

No problem!

Just install the v3 chartjs now works.

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

2 жыл бұрын

Did you get it running? Can you help?

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

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?

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

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

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

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

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

@WornOffKeys

2 жыл бұрын

Glad you liked it!

Hey how do i import CSV file and plot it ?

HI,How to use container in the same program.Could you please produce a code

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

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

3 жыл бұрын

Thank you!!!!

@ajexzetia3878

3 жыл бұрын

Thank you so much

@vetrivel-yx2on

3 жыл бұрын

This comment should be pinned Thank you

@vetrivel-yx2on

3 жыл бұрын

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

@afshinmoshrefi

3 жыл бұрын

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

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

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?

@pranavan4055

11 ай бұрын

same problem, did you found the solution ?

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

@WornOffKeys

2 жыл бұрын

Glad to hear that!

@Dmitriy_Sentinel

2 жыл бұрын

@@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?

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

@Eclipse-san

2 жыл бұрын

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

2 жыл бұрын

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

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

@zalimbhaiofficial2840

Жыл бұрын

use ?.map

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

@WornOffKeys

3 жыл бұрын

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

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

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

@WornOffKeys

2 жыл бұрын

That is the VSCode extension "Prettier"

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

3 жыл бұрын

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

3 жыл бұрын

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

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

it doesnt work

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

Hi can you do a tutorial on react-vis?

How could you make it responsive for mobile?

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

@jackgong7658

3 жыл бұрын

THANK YOU OMG

@ShiyunLian

3 жыл бұрын

You save my life

@dalelanto895

3 жыл бұрын

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

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

@dagi_works

2 жыл бұрын

Same.

@bekirs4240

2 жыл бұрын

Download older version or use docs

Early

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

Can you create a histogram with chartjs?

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

@hamidnaeimi2828

3 жыл бұрын

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

@yuecheng3508

3 жыл бұрын

@@hamidnaeimi2828 thanks!!

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

2 жыл бұрын

same

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

@lajesfieldspotter4387

3 жыл бұрын

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

@viniciusfrasson4628

3 жыл бұрын

@@lajesfieldspotter4387 thanks

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

@SydAliHsn

2 жыл бұрын

THANKS bor loooove youuu

@siel1374

2 жыл бұрын

@@SydAliHsn ♥️

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 KZread plus very low voice's volume in the video which was very irritating too

@soumyagarg4768

2 жыл бұрын

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

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

2 жыл бұрын

Background color is need

@ganeshtarone1936

2 жыл бұрын

Did you got the solution for this?

Hi, can i get the code pls?

can you make a chart by using firebase data?

@WornOffKeys

2 жыл бұрын

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

@chrollo8483

2 жыл бұрын

@@WornOffKeys can you make a video tutorial?

15:00

CORS Policy ):

not working!

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.