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 RU-vid 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( Bar Chart ) }
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
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;
@@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
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?
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?
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!
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: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 RU-vid plus very low voice's volume in the video which was very irritating too
