Integrate Chart.js Using React with Data from a REST API (2022)

[Music] hello guys welcome to today's tutorial and in today's video i will show you guys how we can install and integrate the latest version of charges which reacts the difference between this tutorial and other tutorials nowadays in this tutorial we will be working with the rest full api and the api we'll be working with is called coin ranking and quickly let me show you a quick example of some of the charts we are going to integrate so we are going to be working with a bar chart we work with how to integrate a line chart a pie chart as well as a donut chart this tutorial is going to be beginner friendly so you can follow along every step of the way as i'm going to be breaking everything down step by steps with no steps keeps so without wasting much time let's get started and quickly before we get into it i would like you to like this video as well as subscribe so the youtube algorithm can't keep recommending this channel to other developers out there or aspiring developers out there who are looking for learning resources i really appreciate it if you do so let's get started so the first thing we need to do is to create any react js projects to do that we are going to be making use of create react app so quickly let me open my terminal and inside of my terminal i can just impose the command which i'll use to create the new project so i can just say yan create react app and the name of our project is called chat so with that i can just press enter and then a new project is going to be generated for us now that a new price has been created for us before i open this in visual studio code i would like to install the dependencies we're gonna use that is the charges dependency as well as the reacts charges dependencies so let me go to the documentation and if you go to reach our gs2 you see the command the under this quick start you see the installation command so i'm going to grab this and then i'm going to paste this in the terminal but before i do that i need to navigate to where our project directory is and that is on that chat so i'm going to paste it in npm install react charge js2 as well as charts.js so i'm going to press enter and wait for this to get installed as well as you can see our two npm packages has been installed so the next thing we need to do is to open up the projects in vs code and let's do that so quickly let's just go through what we need to do here so we have the src folder that's where we're going to be working in our reacts projects basically if you are familiar with react you know most of the work is done in the src directory so in the app.js file which is the root of our application that we display whatever we have on the browser so we can clear some of the boilerplate simply generated for us so i'm going to clear off this header section and then i'm going to enter probably an h2 tag that says hello and then i'm going to start up the project to be sure that our app runs successfully so i'm gonna save this head back to the terminal let me clear everything here off type in npm starts as you can see on the browser we have the issue tag displaying in the browser with the yellow text so with this we know we don't have any errors in trying to start up our project so what we need to do next is to set up this folder structure of our components in the src folder i'm going to create a new folder and i'm going to call it charts so inside of the chart i'm going to create f four files actually the first file is going to record bar charts.js the second will be called linecharge.js the third pie chart the gs and the last file will be called donutchat.js so we're going to start off with the batch address here so i'm going to close everywhere that that is not bar chart apart from the app.js so we can generate a boilerplates templates by typing the short command there are fce and then press enter so it generates a functional component for us what we want to do next is to create a new chart we already have the charges libraries installed in our packet.json as you can see charges version 3 and then react charges which we have here version 4.0 with that we know if we integrate the chart in this particular chart.js file is going to display the browser so the next thing we need to do is to head straight to the charges documentation and see what we have in there when i add there you see chat.js.org i can click on get started and instead of get started page we get some samples for how we can create the chart so what i need is just these these are objects but before i grab that let me call some of the imports we're gonna need to display that for now we are not integrating the api i just want to show the static data on the browser to see that the chart is displaying properly so for that to work we need to import charts as charts js as well as bar elements all from chat.js so this helps us to create a new bar chart by bringing in the elements and also we need to bring in the bar from real charges too so if you can just type in imports bar and that's from we have charges too so finally what we need to do here is to register the charts so we need to register charges for this to work or else we're gonna get into some errors so i'm just going to type in charts gs dot register and then we call the bar elements we have above so i'm going to grab this by elements and then paste it in inside the div we have here i can also call in the back components this way and it's going to take in some attributes so the first one is i'm going to give it heights and let's give it a height of 400 and we need to bring any data for it to display so i'm going to head back to the charge.js documentation so i'm going to grab everything inside of this data object and then paste it somewhere here so we can set this data as a variable by typing in data is equals to then let's scroll down and for now i need to get rid of these options objects i think that should fix the error we're having cool so the ob the options object is going to also have its own um variable so i can just grab that as well like just the options object i think it ends somewhere here and then it's going to be outside of the data object so i can just i'll fit another variable for it so the options is equals to this i believe this is pretty much clear so we can add some other configurations to this options variable for instance we can just type in maintain aspect ratio we can set it to false and then we can also configure our legend as well so i can just type in legend takes in an object and inside of the objects we can just set the labels which also has his own object and give it a font size of something like 26. okay we're good to go with that so let's bring in the data as well as the options inside of our bar element so i can just say data as opposed to data as well as options so let me grab these options as opposed to options now i save now for this to show in the browser i need to bring it in inside of app.js file so i'm going to get rid of this hello and instead we're going to have a bar charts component and then we need to import it before let me get rid of this logo and then just below the imports css we can just have imports bar charts from the chart folder and then we call bar chart so let me save and then quickly check the browser and see what we have and in the browser it seems we have some bunch of errors it says unexpected keyword var in line 36 so let's check line 36 okay i think is this comma we are not supposed to have a comma there so i'm going to remove the command then save again head back to the browser seems to have some element some errors in the console rather it says linear is not a registered scale i think i understand what that is for this configuration we need to bring in two scales the first scale we need to bring in is the category scale we need to import this into chart.js as well as the charge charges.tradista configuration so let me bring in category scale as well as linear scale okay let me save now i think we're going to add this comma as well so let me save and then in the browser i believe we should be good to go excellent so we now have started data loading in the browser without any form of errors so what we need to do next is to bring in the response from our api that is data from our api through that we're going to be making use of coin ranking like i said at the beginning of the tutorial so that we need to go through the documentations let me close some of these um tabs we have in here so i type in coinranking.com so it takes me to the coin ranking website it's a cryptocurrency api that has data on various cryptocurrencies we have out there from bitcoin to ethereum it shows their prices their market capitalization and all so if you're familiar with this youtube channel this is something i've done in some of my previous tutorials so let me scroll to the bottom of the page and then show you how you can integrate this api you can click on generate api key let me open this in a new tab and as well as visit the api documentation so in the api documentation we're going to be working with coins so i'll click on coins under the coins we need to get data on some of the coins so if you have time you can go through the documentation and have an in-depth look at it i think it's pretty much straightforward and clear they did a good job explaining every aspect of the api so i think it's very easy to integrate so before one thing you should also know that we will need an api key so but what we need to grab first is the base url so i'm going to grab this http s api url so let me grab that and then add back to visual studio code and inside of visual studio code i can create a new variable by using then i say this url it's equals to and then i paste in the base url api and one thing i can do is because we we get a series of coins i think is numbering up to 50. i don't want to have the chart to be i don't want the child to be congested so i can just limit it by passing in the query parameter so i can just say limit is equals to 10. so this will fetch 10 data from the api now this api usually return course so cos error to avoid cost error we need to bring in something called cost anywhere it's it helps prevent cost error another way to avoid the cost error is to try to set up a proxy url and this can be done using node.js but i don't want to create a new js project in in this tutorial i just want everything to be done in react so for the proxy url option i can just create a variable called proxy url and then i i think i can grab this online let me just search for cos anywhere i think they have an npm package as well but we don't need to install that i just need those to grab the url which is what we have here so i'm gonna grab this get back to the projects and then paste it here so as you can see you have https for slash course anywhere dots eurocoat.com so the last one we need to get is the api key from coin ranking itself so let me create the variable so api key it equals two so like i was saying earlier to get the api key we need to let me log out of my account for you to get an api key you need to click on create account so once click on click account create account rather you can type in your name as well as your email address like i already will introduce process so i don't want to go through the press again so i'm just going to use my own accounts which is my email address then i'm going to grab my api key and paste it here so now we have the three variables we need to set up the application so the next thing we need to do is to call the api by making use of fetch so fetch is actually the browser's default way of calling apis so we don't need to install any package to do this however what we need to bring in is react hooks like use effects as well as use state so i'm going to type in use states and then use effect all this is coming from react so the use state is used to create variables in reacts like it helps also create a set of negative so i can just type in const chart then set charts equals to use states now this is going to come in form of an array so i'm going to leave the areas empty so the set chart is the setup while the chart is the getter it gets the whatever data we have in this um application so quickly let's set up the api so i can just call use effects after these effects we have some sort of dependency injection which is going to be an empty square bracket below that so let's create the variable so we're going to make use of our sync awaits so i can just type in const fetch coins is equals to a sync and an arrow function so i wait so we now call the fetch keyword and we make use of backsix so we need to reference the variables we created above i think this key should be in uppercase so the first one we need to call is the proxy url so i'm just going to type in proxy url and then the bridge url as well so base url our request is going to have a body so the method is going to be a gets then we have some sort of headers so i can just set the headers into an object so inside of the object in the other so we have a content type which is applications.json and then x-axis token this can be seen in the documentation on coin ranking let me check so under the node.js example you can see we have an x access token so i'm going to grab that and just paste it right here so it's referencing the api key we created so we can just call the variable we have by making use of back six so that will be api key so we're able to get that as well and lastly we need to set the access control origin so we set it to an asterix which is a white catch that is we want the api to be accessed from anywhere so what this what now possess is it returns a promise so we need to kind of subscribe to this promise by making use of the dot then keyword so then it represents a response so we make use of the first arrow as well we can just say response dot json and then we also subscribe to this by making use of the dot then we just find the response and then let's just console.log the response and see whatever data we have in the console but before we do that we need to catch in case of an error so i can just say dot catch error console.log error i think we're good to go with that let me save okay one more thing we need to do before i save is to call our function so for this to work so let me quickly call the function so i'm going to grab the fetch points or else this would not work so we need to call fetchcoins so now we're having access to that so in the dependency injection we need to call three variables we set above the first one is the base url so i'm gonna call the base url as well as the proxy url and then the api key so let's save so let's quickly check the console if you have the data right in there so let's click on the console tab and then we have an object so if we open up the objects you can see we have a set of coins which are just any numbers because of the limits we set to the api it only returns 10 numbers but ideally the crypto coins the crypto api returns about 50 cryptocurrencies that it go 10 i think is about right for us so what we need to do next is to plug the data we have in the console into the charts if i open up each of these um objects the first results we have we just need two items there the first item we need is the name as well as the price we need name for instance the first result is showing bitcoins and the second one is showing the price of the bitcoin this the second one the second data we get here is showing name as a theorem and then the price as well then the last one is showing let's see the name of xrp as well as the price so this is really cool let's clearly do that so we already have a setter and the gates are in the components so the setup which is said charts is what is going to help us to do this so i'm going to call set charts inside of the response where we have a successful response so i'm gonna set it as json.data so once we do that the next thing we need to do is to loop through the data and then get the name as well as the price so for the name i'm gonna get rid of the colors we have here we have red blue whatever these are just static data but we need data from the api so i'm gonna say charts dots coins dot map and i'm gonna say x make use of the fatal function x dot name so the same thing i'm gonna do for the price so i'm going to grab this so for the for the data for the price i'm just going to change the name to price as well i think that's all we need to do to get this the data coming from the api into the chart so for the labels i might just need to change some things here i can just say something like chat dot coins dot length that is this will tell us the amount of coins available i think that's all but one more thing in case of an error let me just pass in an optional parameter so i'm going to pass in an optional parameter here as well as yeah and yeah as well because i don't load on time so in that case the question mark help us to avoid such error so let me save and then let's check the browser if we have the desired loading on there as you can see we have an error another property of undefined map but the js 41 let's check where the error is coming from so to be sure we are getting data let me console log the chart as well so i can just console log chat and then save once more head to the browser let's refresh the page so chat is returning an empty array it's not getting the data for some reason so what i'm gonna do is to add the optional parameter to the coins as well so let me add these to the coins coins.length as well as the price as well so let's save once more and straight to the page and as you can see the data now gets loaded into the page so we have the price for the bitcoins as well as the ethereum and then finance and the likes which is really cool so with that i think our bar chart is fully integrated you can't see the rest of this data because it's really low like if i open the object and i show you the price of the last results we have that's um 0.82 compared to the price of the first coins we have which is bitcoin which is around forty six thousand seven and fifty six so that's why the one of bitcoin is very obvious why the one for xrp is barely obvious so what we can do next is to integrate the next chart we want to do which is a line chart or let's do it accordingly to the naming so the next one line is done chart so i'll just grab everything inside of the bar chart straight to the donut chart and then we have to paste it in the changes we have a are really so subtle so no major changes so we just need to change the configurations right above so instead of the buy elements we'll be having something else so because this is a donut chart what we have is going to be the arc element so i'm going to replace the by elements with the arc elements and then i think that's all we need to do we don't need the category scale or the linear scale i might just get rid of that and then paste in the arc elements instead so one other thing we might want to bring in we can decide to bring in the tooltip the two tip as well as the legend so that's really cool as well so we need to inject this in the register so i'm gonna grab that paste it into the register and then instead of the bar we're gonna have donuts so i'm gonna get rid of the bar type in donuts down here instead of the bar we're gonna have the donut as well so i think that's all we need to do so let me save this h straight to the app.js to change the settings we have which is bar chart i'm going to change this to do not do notes then let's save and back to the browser to see if this get plotted successfully excellent as you can see we have a donut charts it also has a bitcoin ethereum and the likes so the next charts we need to integrate so let me just click grab the bar chart as well then add straight to the line charts pretty much what we did in the do not chart all we need to do is to generate the components clear everything off then change the name of the bar chart to that of the line chart so in the line charts what changes as well is the elements we have above so instead of the arc elements what we need to have above is going to be we can have the linear scale the category scale but instead of the line by elements we're going to have something called a line element as well as a point element i think that's all we need to do so i'm going to grab the line element replace it with the by element and then i'm going to grab the point element as well and then the bar we're going to change bar to line so i'm going to grab this and then change this to line i think that's all the configurations we need to do to display the line chart so in the app.js we can as well replace what we have there which is do not i save everything head straight to the browser to see if we have a successful display of the charts as you can see the line chart is displaying successfully and as expected the bitcoin is showing at the top while the rest of the charts is showing below because they have a very low price so the last chart we need to show is called the pie chart the pie chart for some reason i think is similar to the donuts charts in terms of design and because of this it also has the arc element so i might as well just copy everything we have in the donut chart and plot it into the and bring it into the pie chart so instead of inside of the pie charts i'm gonna bring in the doughnut chart then replace the name to a pie chart so it has a arc element it has a two tip it has a legend so we leave that as it is then what we need to change is the doughnut so it's not going to be do not want to be a pie so i'm going to change this to pie grab the pie scroll down to the bottom of the page and then replace the notes with the pie as well as in the app.js for us to see how it looks like we're gonna replace this with a pi as well so let's save everything we've done then head straight to the browser and there you go we have our pie charts and the majority of the pie chart is taken by the bitcoin price which is about 46 000 and then followed by the ethereum binance solana and the likes so that's it for this tutorial i believe i've been able to break down how you can use the charges package npm package together with the react chart to package to plot different types of charts and most especially with data coming from a rest api so it is something i think a lot of people are interested in how to plot data from an api into a chart so i if you have any questions do put this in the comment section below i'll be sure to answer and then make sure to like as well as subscribe and i will see you again in the next one so take care guys

Channel: The Code Angle

Views: 50,085

Keywords: chart.js tutorial, chart js tutorial, chart js, react tutorial, react.js tutorial, react beginner tutorial, Integrate Chart.js Using React with Data from a REST API, react chart js 2, chart js react example, chart js with react, react chart 2, charts in react js, react chart js example, react chart example, react chartjs, chart js pie chart, chart js doughnut, chart js bar chart, customize charts, reactjs chartjs, different types of charts, coinranking, coinranking api

Id: yOousFGfmZc

Length: 24min 51sec (1491 seconds)

Published: Thu Dec 23 2021