Chart.js in React.js tutorial : Create a great looking area chart, includes tips on customization

hello in this video i'm going to be showing you how to use charges in react as you know charges is a popular javascript library for creating charts but one of the drawbacks is on their website there's no uh instructions or on how to use it in react but luckily there is a npm module that you can install called react charges to and that's what i'm going to be showing you how to install and use in react but before we uh let's get started i just want to talk a little bit about charges so i'm on the chart jay's website charges.org from here if you click on get started it will take you to a page uh with all the uh instructions uh mainly the documentation so it's got all the installation uh procedures here but we're not gonna be using that so i'm just going to go over the chart types because that's what we're going to be interested in okay and we're going to be installing a line chart but as you can see uh you can have line chart bar chart radar chart and you know they all they give you like different examples of uh demonstrations of these charts so we're going to be considering online chart okay so as you can see here uh it's got a demo line chart here and it's got some call snippet that you can uh uh interact with and so if if if i go to the setup of this now what it's showing here is it's a line graph and it's got a little sort of a curvy-ness to it okay so and it's got a grid and it's got x-axis it's got months and you know on the y-axis it's got their numbers up to 85. okay so in the code snippet you can actually uh play around with it it's interactive so if i make this uh 800 and you can see it's it's the the values increased to 800 here so if i put it back to 200 so it's put it back to 200 and you know you can you can you can give it a fill color here if i say true and it will fill the graph and so you know so it makes it into an area graph so that's the sort of thing that we're going to be interested in so we're going to come back to this later so what we're interested in is in the npm in the installation so the installation uh if you go to the npm uh site and search for react charges so that's the name and then you come to this part and it tells you how to install it and use it as you can see here so what we're interested in is how to install it so this is the way to install it yeah as you can see uh you got the react chart js dash 2 and a chart there so you're installing both whilst these libraries what charges is it's a wrapper that wraps around the chart.js library so as you can see in the usage uh so you will import it and and you can use it as you know in the in jsx so you can just say donut or line chart and then you plug in the data and that's as simple as simple as that and how to use it but obviously you've got your data part as well and i'll show you that as i go along okay in this video we're going to be creating an area chart that looks similar to this okay so as you can see on here you got on the left hand side we've got some sales figures and on the bottom we've got the months and on the graph where you got the points data points that you can hover over and you can get a tooltip to give you more details and you if you resize it it will also resize perfectly as you can see here and in smaller sizes you can at the the chart is you usable as well so that's what we're going to be building and let's get started so to follow along with this tutorial you would have already ever created a basic react app using npx create react app as i've done in as you can see in my vs code here on the left-hand side i've got all the basic files set up already okay so what i'm going to do is uh in the app.js i'm going to take out the everything under the header uh element because i'm just gonna have a basic um wrapper with class name app and i'm just gonna put in a header two and call it and give it a heading quarterly cells or mobile phones okay and once i've done that i should be able to see that in the browser okay so that's what's running in the browser at the moment and if i go back okay now i'm going to go into the app.css and i'm going to delete everything except the app dot header and and i'm gonna use this style for that header but i'm gonna rename it to just app okay so and i'm gonna uh give it a different color one three two seven three seven so it's it's a sort of a dark peach blue color and also i'm gonna give it a still styling it's going to be a color and the color is going to be a 9 dc 6e oh so we've got the hash okay so that's uh that's a sort of a light bluish color heading okay so if i go to save that and just so that's what it looks like at the moment so i've just misspelled their mobile okay so so that's sort of the basic uh setup that i'll need okay next i'm gonna revisit the npm site okay uh where you can where you got instructions to install uh react charts too okay so uh in that page if you go down this is there's a heading called example and there's a live example there and if if you click on the right example live example uh it will take you to a page that has some um a listing of all the sample codes that you can use with uh react charts too okay so i'm going to click on the basic uh there's a link called basic underline charts that's what we're going to be using so i'm going to click on that and it will take me to a display that displays the line line chart okay and under there there's a uh there's a button called github source and it will take you to the source code for that line chart so what we if you look at the the the source code so it's got a data part okay it's got a constant data and it's got a constant options okay then it's got a function that outputs the jsx so what we're going to be uh interested in is just copying this part of the time being and then we're going to use that in our app wrapper so the the line uh the the line component okay so first we're gonna just copy this and uh install uh react.js okay so i'll go back i copied that and i'm gonna just paste it there okay so and i haven't installed the react charges yet okay so then in in the app wrapper i'm gonna put in the line component and it's going to be data data equals curly brackets data and options equals cut brackets options so we're just gonna make so close so okay so i've got a line component there which takes in which has attributes data and options okay so so it's got i've got constant there options and i've got a constant for data so now i will need to install a reactor idea so just go back and go back to the npm okay so i'm gonna just run npm installed so i'm just going to copy that the line to install it and go to obvious code and go to new terminal and do an install there and it'll take a few seconds so it's it's it's installed now now if i do this a save and then go into so as you can see i've got a line chart up and running uh it doesn't look as we want to but the the main point is that we got something up and running without any errors so that's a good thing okay now that we've got a basic chart up and running uh we can start to customize it to our needs okay first uh i want to just talk about the data section that we just copied over so there we we're creating a constant data object here and it's got labels and it's got a data set so the labels are there the x-axis labels and the data set is the actual uh y-axis uh data series okay so what we're gonna do is we're gonna change it to our needs so it's gonna be mobile phones as for quarterly figures so first of all i'm gonna what i'm gonna do is so i'm gonna change the labels to quarterly months so as i'm doing here okay then i'm gonna go into the data part and i'm going to put in the y values for the quarterly cells for mobile phones okay so now uh in the label for that series i'm just going to say iphone cells okay so iphone sales and if i save it and go to the chat guess if i refresh okay so i got iphone cells and that's that's what it's reflecting great so remember the data uh the way it works is you know we have the jsx element for the line and you plug in the data through the data attribute and you plug in the options so the options attribute now so the data is actually all your data items basically like for ourselves figures okay and and in the data set array you have an object of uh basically configuration for that that particular data set so it will have to do with the labeling of that data set and the action values and then you can have some uh styling um configurations for that uh data set so we it we to do with the styling of the the dots and the lines and the color of the lines okay so the and the rest of the the options part will deal with uh the sort of the chart layout the scales and the x-axis styling and the tix styling so so everything other than the data you style it through the options and the options is fed through as i said earlier are the options attribute there so there's two parts so uh so first we're gonna start with the data part so we're gonna start targeting the data series so i'm gonna so i'm gonna go back to the chart.js docs uh page so i'm under the charts.org docs and i've selected the line chart so as you recall uh i explained about the you know the snippet the cold date you can play around with which is interactive so uh for this chart this is the styling for the data set okay so what we're gonna sort of uh change so we're gonna change some look and feel like changing the color of the area under the curve and also the dots now the dots to target the dots if i go down the page under the point border color point for the weather point these are the three elements that we we need to uh uh target okay so you can change the color for these and and the size of the the dots so if we go back i can just uh start changing this and if so i'm going to change the fill to true and then i'm going to have a background color of a sort of a dark blue color and then i'm going to target the dots right so i'm going to have a pointer point border color or sort of a purplish color and then i'm going to make the point water with a bit larger i'm gonna give it a width of five and then i'm gonna have uh increase the radius as well in the middle part so there you go so uh we can use this styling and also i'm gonna change the the curvature because it's sort of a straight line at the moment i can give it uh give the tension the tension is the curvature of the the line so i'll give it a four and it's it's more of a smooth line now okay so i can copy this part into our code and it should work so i'm going to replace this part with this and if i save it and go to my chart there you go so it's looking much better now so back to our code now uh now we're going to target the x and y axis so and what we're going to do is we're going to go into the options and under the scales we have the x x and y axis now uh this is a a different way of doing it but we're going to do a standard way of specifying our styles for x and y axis so we're just going to delete that so i'm just going to delete that and then i'm going to put in y as an object and then inside y i'm going to have text and inside text i'm going to have um the color and i'm going to have it white and then i'm going to have the font which is an object and in there i'm going to have the size as 18. okay so if i save this and go to the browser and if i go to the browser okay so so now i've got the the text color changed on the y-axis okay so do the same for the x-axis so all i've got to do is i've got to copy that section okay and copy just put a comma there otherwise you're going to get an error paste it next and i'm going to call it x okay so and that's going to be the same um set the same color and the size so if i save that go to so now i should get along the bottom i've got white text and the size has changed as well so now we're going to add some grid lines to this so we'll go back now to add the grid we're going to add it after the text so i'm going to add a sort of a lightish horizontal grid line as and i'm not going to have a vertical one so so after after the tick i'm just going to add a comma and then it's going to be grid and i'm just going to give it a color so it's going to be sort of this so if i'll save that and for the browser as you can see there's a sort of a fine uh grid and it just gives it a good uh look and feel okay next thing we're gonna do is that we're gonna um okay next thing we're gonna do is we're gonna get rid of the legend we don't want to see the legend and we're going to add some padding to the bottom okay so let's do that okay so i'm going to go back to my options and at the very top before the scales i'm going to add an item called layout and this is going to be a an object and don't forget the comma there after that okay so then within the layout you know we're going to have padding again which is going to be an uh which is going to be another object and within padding we're going to have bottom and i'm going to say 100. so you can have left right top bottom so we're just going to have bottom so if i do that save that and go back okay so so i can see i can see it uh see the bottom now okay so uh go back and then now to add the legend okay we need to add an item called plugins first keep plugins and for some reason you know there's certain things that you gotta to style certain things you you gotta put it under plugins uh and legend and tooltips are regarded as plugin so that's another object so put the comment there okay and so the plugins will be we're going to target the legend okay which is an object and within there we're going to say display and false so if i save that go back so don't see the legend now that's great so our chart looks really great now so that's how you uh um create a chart in charges and react okay so so the one last thing to test out is the responsiveness so if i just drag the sides and to resize it it resizes perfectly and you can still use it as well there you go so if you enjoyed this tutorial please subscribe to my channel and see you in the next video you

Channel: ui-code-tv

Views: 2,535

Rating: 4.9148936 out of 5

Keywords: chart, js, chartjs, react.js, area chart, reactjs, chart.js, react

Id: ydP05Qv0pek

Length: 20min 20sec (1220 seconds)

Published: Fri Apr 30 2021

Reddit Comments

[u/haptiK]

one thing i have struggled to figure out using chart.js is how to render text vertically along side the Y axis and at the bottom horizontally along the X axis. That is a feature that should be included in my opinion, but i don't see it. I suppose i could use CSS to position the text but i am lazy and honestly don't feel like i should have to separate that from the graph itself.

[u/BearDavidFather]

I use ChartJS at work for a lot of stuff. From real-time rendering data to data modifications through visual interaction. It's amazing how much it can do with a "simple" tool.