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

Learn how to create powerful data visualisations with Chart.JS and React.JS.

🙋‍♂️ Need help? Ask in our Discord community:

💡 Have an idea for a video or course? Request it here:

------------------------------

🕒 Timestamps:
00:00 Introduction
00:20 Creating our React.JS app
03:34 Installing Chart.JS
04:14 Bar Chart
14:05 Line Chart
15:00 Pie Chart
15:50 Font size
17:41 Disabling Tooltips
19:07 Legend position
19:42 Outro

#reactjs #chartjs #wornoffkeys

#discordjs #discordbots #wornoffkeys

FTC Legal Disclaimer - Some links found in my video descriptions might be affiliate links, meaning I will make commission on sales you make through my link. This is at no extra cost to you and it helps support the channel so I can make more free YouTube videos.

[WornOffKeys]

🔥 Get the code here:

🙋‍♂ Need help? Ask in our Discord community:
wornoffkeys.com/discord

[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!

[MikeCerna]

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

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

[csyner]

For anyone getting errors try this fix:
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.

[dimabernada]

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

[ranati]

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 <ForwardRef(ChartComponent)> component:

My Code:

import React from 'react'
import { Bar } from 'react-chartjs-2'

export const BarChart = () => {
return(
<div>
<h1>Bar Chart</h1>
<Bar
data={{
labels: ['Mini Cars', 'Sedan Cars', 'Hatch Backs', 'Heavy Loader', 'Motor Bikes'],
datasets: [
{
label: 'Number of Vehicles Washed Today',
data: [12, 19, 3, 5, 2],
},
],
}}
height={400}
width={600}
options= {{
maintainAspectRatio: false
}}
/>
</div>
)
}

[paramshendekar]

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

[amirjosevelasquezaburdene]

Awesome video, thanks!!! Keep going <3

[EminoMeneko]

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

[timothyroy]

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 (
<div>
<Bar
data={{
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Ornage"],
}}
height={400}
width={600}
/>
Some Dat
</div>
);
};

export default BarChart;

[siel]

npm uninstall react-chartjs-2 chart.js

[sergeos]

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

[vivekknShots]

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

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

[hplaptop]

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

[blackhoody]

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?

[naumanshigri]

oakoran tong hay momo rozi. thank you very much

[rezaz]

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