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

hey everyone alex here from wornoffkeys.com and in this tutorial i'm going to show you how you can use chart.js within your react js websites the goal of this video is to show you all of the common use cases for chart.js and also show you how you can navigate the documentation so you can then figure out how to use chart.js to its full potential within your own use case so to get started i'm going to open up my console and if you already have a react application you want to work with then feel free to skip the next section using the youtube player however if you don't have a react application we're going to go ahead and make one now within our console i can run mpx create react app and then we can put a space and then name our project mine is going to be chart.js but you can name yours whatever you want you can then press enter this might take a few minutes depending on your internet and computer speed so go ahead and pause the video and come back whenever it's done mine is now done installing i can then navigate into my folder with cdchart.js i can then navigate into vs code by opening it with my commands line if you open up your text editor in a different way feel free to do that of course and then we're here we can go ahead and run our app with npm run start this will automatically open it in your default browser so here we see this i'm going to go ahead and minimize this i'm going to minimize my console but i'm going to keep this process open so we will automatically rebuild our react application whenever we make changes we can minimize this we can go into our source directory there's a lot of files in here that aren't going to be relevant for this video we're going to go ahead and delete those one is to setup test.js we can also delete serviceworker.js the logo index.css app test js and then we can go inside of our index.js and we're going to make some changes because some of these imports no longer exist such as index.css and the service worker now that we're no longer importing the service worker we want to delete all of it down here so your index should look something like this we can save this and then go inside of our app.js we are importing a logo here which we no longer want to do i'm actually going to delete the entire component leaving us with just a couple import statements i can then say const app equals an anonymous arrow function and then we can return some jsx for example i can just say div hello world and we have to export this with export default app we can go ahead and save this and then going back into chrome we should see our updates right here so we see hello world on the screen so everything is working going back into vs code i'm going to go into my source directory and i'm going to make a new folder this will be called components and within here i'm going to right click and make a new file this one is going to be called barchart.js this is going to be the first chart example that i'll be teaching you today so to start off i'm just going to make a very simple functional component we can import react from react and then i can say const bar chart equals an anonymous arrow function we can then return some jsx which in this case will just be a div that says bar chart we can export this with export default our chart we can save the file and then we can go into our app.js we can go ahead and import this i like to separate my local imports so i'm going to add in a space from the actual react import i can then say import bar chart from components or slash bar chart now that we have access to this within this div instead of saying hello world i'm going to go ahead and use this bar chart component that we just imported we can then save this and going back into chrome we now see bar chart which means that we are correctly importing our component going back into the bar chart file we now want to actually use chart.js so how do we do that well if we go back into chrome we can go to the react chart js2 npm package and a link to this will be in the video description or wanting to install this so i can go into my console and i can press ctrl c in order to stop the process we can scroll down to installation via npm we can copy this entire thing which will install react chart js2 as well as chart.js we can copy that and right click on the console and go ahead and run that once it's done we might want to start our app again so i can press up a couple times and run npm run start so likely open up a new tab so i'll go ahead and close the old one and if we go back into the npm tab we can scroll down and we see usage right here we can import specific chart types from react chart js2 in this case this is a donut chart we also see this data property here so if we go into the properties table we see a bunch of different information we can pass in such as the data the width the height and more information if we scroll down further we then see an example for the bar chart we can pass in the data the width and the height and we're going to do just that so let's go back into our bar chart file i'm going to minimize my console to make more room we can then import something from react arcgis 2 and the reason why i didn't specify anything within this object is because we can hold ctrl space it's going to give us examples of what we can import here we see a bunch of different chart types wanting to import a bar chart which is already selected we can just click on it and now we can go ahead and use this so inside this div instead of saying bar chart i'm going to then use the bar component and like the documentation suggested we can pass in a height and a width so my height will be 400 pixels my width will be 600 of course you can add whatever values you want here we also can pass in a data object and we're going to create two curly braces the first one representing dynamic javascript content the second one representing an actual javascript object so what do we actually pass within this object well if we go back to the official documentation we go to get started this red button right here we can then go to usage on the left and here we see creating a chart but if we scroll down we see an example of an actual use case here we see a canvas html5 element and so this is going to assume a vanilla javascript website development environment however we're going to be using the npm package but the actual chart information is going to be the same here we see this data object so everything within this object will be what we're covering within this video and i'll be explaining what all these things do but here we see this type property right here and this is going to be set to bar we don't actually have to worry about that because in our use case the bar component is going to handle that for us we just have to pass on the data object and then we're good to go so let's go back over here and the first thing within data is going to be labels when it comes to a bar chart these will be the things at the bottom of the chart that will represent each individual column so for simplicity i'm going to be using the same exact example as this documentation i'll try not to copy and paste everything but there will be some things such as the colors and the labels that i will be copying and pasting and also a link to this page can be found in the video description of course when following along you can use your own data but that's up to you so let's go ahead and copy this array i'm going to try and only copy the values because it's an important practice to type out as much code as possible because it makes it easier for you to remember it so going back into vs code we can then say labels is going to be an array we can then paste in the actual strings if i save this it should restart our app and going back into our website we now see this chart here but there's no actual visuals there's no data we do see a y-axis here and an x-axis which does have the labels that we specified however we now see the scroll bar here so let's get rid of that going back into vs code underneath our width we can add in options which is going to be its own object we're going to have two curly braces here we can then say maintain aspect ratio is going to be false we can save this going back into chrome we now see that we no longer have a scroll bar and it's going to take up the entire width so this is another property that we see right here so options maintain aspect ratio is false and we're going to be adding more things within the options data later on so going back into react.js we now have this target that we can see let's go ahead and add some data to it go into the documentation we now see data sets which is going to be collections of objects that represent certain data values in this array here we have one single object there's a few different properties it shows for example the label the actual data values the colors and we can't specify one color for all the data values or we can specify multiple colors as well as multiple border colors and it's going to pair up the first data value with the first color the second data value or the second color etc let's create an array of data sets that has one object going back into vs code within data underneath labels we can say data sets it's going to be an array or there's one object inside we see that there is a label in this case it is number of votes we can say label is number oops number of votes then underneath that we then have data which is going to be the specific values which i will copy for this so data will be this array and we can go ahead and save our application we can go back into react app and we now see some type of data here where chart is up to 12 and hovering over it we get this cool tool tip that animates and moves around we also see yellow green purple orange and blue however there's no actual color here we can change that as you see right here we can use rgba we can use certain hex colors we can also use the standard colors such as green blue etc so quick example because the first one is red we can then say background color is going to be an array but the first one is going to be red we can save this and go back into our app and we see that only the first one is red this is what happens when you pass in an array to here instead of just a single string such as red right then save this it'll use that color for all the bars so here we see all of them are red we're going back we can convert this back into an array and i'm going to go ahead and copy and paste the values for the background colors of course you can customize these we got red green blue and the level of transparency we can then save this and going back into our application we now see actual colors for each one going to the documentation we also see border color so i can copy these values and then going back into vs code underneath background color we can say border color and this is going to be an array or we can then pass this in and if you notice there there was a lot of options when i was typing that if i go to the next line after border color and hold ctrl and press space you have a lot of different options our percentage bar thickness border align we can scroll down and there's a lot of things we can do to customize this oops went a little too far we have certain access ids we have the type step line stack there's plenty of options here i'm not going to be going over all of them within this video however i will be showing you how you can figure out what each of these do within the documentation but let's continue back to our example the last property within the example here is the border width is one we can specify that as well border width is one we can save this and going back to our application we now see this border around here and if we were to change this to 10 for example we're going to see a much larger border so we can go back change that to one and then if we go back to the documentation and we scroll down we now see options so one thing you see here is that the two is the lowest right here if we hover over purple that's how many votes purple has however it's not displaying anything and we can fix this by starting our chart at 0. so we go back we see options we see scales x-axis ticks begin at 0. so let's go ahead and type this out just so we get more familiar with the code so we got a scales object which then contains a y-axis so going back into options we can then say scales gonna be an object with a y-axis being an array of objects and we see that the first object is just gonna contain a text property which is its own object that contains begin at zero is true so we can then add in an object we can then say tix gonna be as its own object with a begin at zero is true we can then save this and going back to our application we then see zero at the bottom here and we now see actual data for purple this is a basic example of a bar chart but what happens if we add in multiple data sets one thing to keep in mind is that if you click on the legend up here or the key you can actually toggle on and off certain data sets and so let's quickly add in another example let's go back into vs code going up we see data sets with this array we see this one object right here but at the bottom of this i'm going to make another object we can then have a label and we can call this quantity this is going to be how many of these are there now this doesn't really make too much sense because we're apparently voting on some color however just as an example we're just going to say how many of some item are actually there so what's next after a label we have our actual data and how many of these do we have we have one two three four five six we can add in six different numbers so our data will be an array we can say 100 104 67 508 950. so added whatever you want of course going back up we then see background color these are going to be a bunch of different colors we also see border color and border width however when it comes to this i'm going to keep it simple with background color just being orange we can also say border color can be red this might not look the best but it's just an example we can save this going back into our application we now see these really tall orange bars but our previous bars are super small so why is that well we only have 12 votes for red 19 votes for blue we have 900 purple so because of that our graph gets really tall and our data values are really short when it comes to the previous data set so to change that we can go back we can minimize some of these let's just say 58 and 9. let's also say instead of 100 we can say 47 and 52. let's save this let's go back and now we see the actual data sets or both now let's say we want to disable the quantity we click on that it will automatically have an animation that will fill the rest of the chart with the existing data we can also disable the number of votes here and so this is a very basic bar chart let's go back to the official documentation and we can scroll down and there's a bunch of options here we can eventually see charts where there's a line a bar radar and a bunch of other ones let's go ahead and check out line charts real quick and so it'll look like this we can scroll down we have our data we have our options for the type is line as we know from the library we're using we're importing bar from react chart js2 let's also import line we could then delete the bar import we can also rename bar right here to line we can then save this and going back into our application we now see a line chart this looks very different here we see the number of votes in the quantity and if i disable those we're then going to see the number of votes that's going to move up and down so this type of chart would obviously make more sense with something that's clearly very linear so something that happens every day and tracking data over a certain number of days but this is just an example let's go back and i'm going to show you one more example so here we see donut and pie we can click on this and we get this type of thing here so this is technically a donut chart because there's a hole in the middle we can scroll down we see the type is pi and the type is donut we can very easily change these so for example instead of line we can then import pi and then instead of line here we can import pi if i save this and go back we now see a pie chart however this looks a little weird because of this second data set here we go back into our code and we scroll down and we comment out the second data set we can then save this go back and it looks a little better here we can also disable certain ones and it's going to automatically move the pie chart around you only show the remaining data sets we can hover over these to see the different data values here and so this is going to be how you're going to use a pie chart so at this point i'm fairly sure you have a good idea of how to use the basics let's dive more into the documentation so you can see how to find certain aspects you're looking for and also some examples of the differences between the official chart.js documentation and the react chart js2 npm package so going over here we're currently on donut and pie chart example we can scroll up we see configuration we can scroll further we see general and so let's take a look at some of these options here let's click on fonts for example here we see options legend which is going to be this thing at the top we can actually adjust the font color if we scroll down we can also adjust certain other things for just the font size let's go ahead and try that so we're going to add in legend which is its own object and then labels which is its own object and then we can add in font size keep in mind that here we have font color which is this right here and so whenever we're passing this into the actual labels object we don't have to include default so we're going to include font size and we're going to set it to something crazy like 2 pixels and then we'll try 70 pixels and we'll see what that looks like going back into vs code we can scroll down to our options and then after scales so i'll click on the opening curly brace and then know where the ending curly brace is we can then add in legend which is its own object and then labels and then font size can be two we can then save this and go back into here and we can barely see the text i'm not sure if you can see this in the recording but if i scroll in we can actually see it right there so if i scroll back out let's now try changing this to 200 for example and if i save this we then see these giant things here obviously this doesn't make too much sense to do but it's just an example that this is actually working i'm going to go back and change this to 25. now this is more reasonable we can go back and of course we can change other things but i'm sure you get the idea let's go take a look at a few more things let's scroll down let's say under configuration we go to tooltip we can then see chart.default.global.tooltips and the chart.default object is going to be something that's used frequently within this documentation we have to use it slightly differently when it comes to the actual npm package we're going over here if we do a search for default we then see chart.js defaults where we're importing defaults and then we're assigning some things here let's go ahead and do that inside vs code at the top instead of just importing pi we can also import defaults and then going back let's see what we can change here we have defaults.global.tooltips. whatever this is let's say enabled this is a boolean by default is true and this is the actual hovering effect that you see when it comes to the actual value and the name so for example blue is 19 red is 12 that's the tooltip let's say that we want to disable that now that we have this imported let's go back into the documentation and we see we can access defaults.global.something and assign a value there this is something we can do above our class and so we are looking for enabled so above our bar chart class or functional component i should say we can say defaults dot global dot tool tips enabled equals false if i save this and i go back into my application when i hover over them nothing actually happens that's an example of how to use the default values that you'll often see within the documentation we can also look at legend here we see defaults global legend we see position which is top we can click on more here it scrolls us down so let's say we want the legend to be at the bottom of the chart well we can just specify bottom for this property you scroll back up this is going to be default.global.legend.position so defaults.global.legend dot position equals bottom we can then save this and going back into our application now the legend is below the chart on the bottom obviously you can use left and right as well but that's it for this video if this helped you then please consider liking and subscribing if you do need help with anything then feel free to ask the one off keys discord server the link to that will be in the description and the pin comment you can ask your questions there thanks for watching

Channel: Worn Off Keys

Views: 69,584

Rating: 4.9599714 out of 5

Keywords: chartjs, reactjs, crash course, tutorial, for beginners, using chart.js, chart.js tutorial, react js

Id: c_9c5zkfQ3Y

Length: 19min 56sec (1196 seconds)

Published: Fri Oct 23 2020