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 UA-cam plus very low voice's volume in the video which was very irritating too
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.
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 :)
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.
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" },
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
@@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.
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
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!
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(
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?
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
@@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?
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
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!
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.
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.
@@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, 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?
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
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 (
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 UA-cam plus very low voice's volume in the video which was very irritating too
🔥 Get the code here:
github.com/AlexzanderFlores/ChartJS-in-React
🙋♂ Need help? Ask in our Discord community:
wornoffkeys.com/discord
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 UA-cam plus very low voice's volume in the video which was very irritating too
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.
@@sureshmakwana8709 same issue
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
)
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'
You're a natural at teaching, thank you so much for this tutorial! It was a great help!
Thank you and glad I could help!
@@WornOffKeys hi can you do a tutorial on react-vis?
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 :)
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.
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"
},
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
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
Thank you!!!!
Thank you so much
This comment should be pinned
Thank you
How did you find that chart js version is the issue?
Could you please explain
@@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.
Excellent tutorial, thank you so much, essentially and very fast, one of the best tutorial I have ever seen
Glad it helped!
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
Did you get it running?
Can you help?
Awesome video, thanks!!! Keep going
Very cool.
Well explained and I loved the bit about documentation. Too few people do this.
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!
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
)
}
Very good! Very useful!
TypeError: Cannot read properties of undefined (reading 'map') is anyone getting this error
use
?.map
it doesnt work
thank you so much! awesome tut!!
Thank you sir for this video! Simply invaluable!!!
Thank you so much 😍 😍 u really saved me.... As beginner it is really helpful.....
great tutorial!
great video! loved it!
i love chart js man data is beautiful
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?
Looks simple, thanks!
What do you recommend to look so that the data can be taken from the SQL source?
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
@@Eclipse-san can you help me in that question, my friend?
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?
same problem,
did you found the solution ?
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
could you resolve this ??
clearly the best
Thanks for the tutorial. It is excellent.
thanks!. really helped me in my project.
Glad it helped!
Hello
If it's possible,could you please put videos in a dropdown box with options like weekly,monthly,yearly?
great vid thank you!
Glad it helped!
Just install the v3 chartjs now works.
Thank u so much brother!
really helpful thank you
My English is poor. But what the author of the video said - I understood absolutely everything))
Glad to hear that!
@@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?
Can we create 3d bar(column) chart with using Chart.js?
Thank you! We really appreciate it!
No problem, glad the video helped!
Hey how do i import CSV file and plot it ?
Very good explanation
oakoran tong hay momo rozi. thank you very much
Hi, Thanks 🙏 That's very cool 👌🌹 . please make more videos like this 🙏🙏🌹🌹 . Good luck 🙏
Thanks bro, your tutorial help me
is it possible for you to make the channel specific commands to you're advanced command handler
Yes, this is something I plan on adding to the new revamped command handler once it comes out
NOTE: HAVING ISSUES WITH "DEFAULT"? npm uninstall chart.js and run npm install chart.js@2.9 . THIS FIXED MINE
THANK YOU OMG
You save my life
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
Amazing. Thank you
i have error : " Uncaught TypeError: Cannot read properties of undefined (reading 'map') " .
what does it mean?
Well done 👏 Thank you!
Glad it helped!
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!
my chart renders multiple times. does anyone know why by any chance?
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.
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.
@@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.
great explanation 👍👍
Glad you liked it!
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?
Great course, but when I create 2nd and 3nd chart, its dont show "Lable name", its only show "undefined"
npm uninstall react-chartjs-2 chart.js
npm install --save react-chartjs-2@2.11.1 chart.js@2.9.4
THANKS bor loooove youuu
@@SydAliHsn ♥️
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
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;
Background color is need
Did you got the solution for this?
Good tutorial !!
Amazing. subscribed.
Thank you!
Thank you soooo much!
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 UA-cam plus very low voice's volume in the video which was very irritating too
Try doing
yarn add react-chartjs-2@2.9.4 , then select 2.9.0 from the options.
npm i chart.js
How could you make it responsive for mobile?
I am having issues with the bar chart. It is saying cannot read properties of undefined.(reading map).
Same.
Download older version or use docs
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
how do you know the name is ''react-chartjs-2''? I cannot import it
npm install --save react-chartjs-2 chart.js
@@hamidnaeimi2828 thanks!!
Thanks!!
HI,How to use container in the same program.Could you please produce a code
This solved the same issue for me...
import { Chart } from 'chart.js'
Chart.defaults.plugins.legend.display = false
Excellent
PLease, I get linear graphic and not curved, do you know why?
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.
same
Hi, how do you do this with data from api? :)
5:04 what kind of extension does this code beautify-er? (adding space around 'Bar')
That is the VSCode extension "Prettier"
Hi can you do a tutorial on react-vis?
Perfect
Thanks!
No problem!
Can you create a histogram with chartjs?
thanks for veryyyy good comtent
😘😘😘😘😊😊😊😊😉😉😉😉✌✌✌✌
Glad you liked it!
How to fixed this -> Cannot read property ‘Defaults’ of undefined , I m using function components In reactJs
You need version 2.9.4 of charts.js.
3.x not working for now
@@lajesfieldspotter4387 thanks
can you make a chart by using firebase data?
In theory you should be able to make a chart with data from any source
@@WornOffKeys can you make a video tutorial?
Hi, can i get the code pls?
not working!
Great Video.. But need to update it for now.
Early
15:00
CORS Policy ):
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.
Great video, thank you!
Glad it helped!