How to Create Line Chart with React Chartjs 2 in Chart JS

so let's start to look how to create a chart with react and we're going to use the react charge JS number two component so let's start to do this so let's start to look at how to create a chart in react so for this we have here very blank template here I'm going to work on this and this is a series that I'm going to focus on and whatever I did is I already installed the react and secondly I also have installed the chart.js react number two or react chart JS number two component so it's already installed so I will make a separate video for that so let's start with the very very Basics here so we have right now this function here and this function basically loads our item here nothing more so what I want to do now is and let's hide this one because basically all we need is the app.js to work from so what I'm going to do here first of all is we're going to create or at least install or import that's the right term import other apps here or components because I already installed the uh react chart yes number two component I need to now import this specifically I'm going to create a line chart here so I'm going to say here line the Caps locks or capital letters uh line Capstone capital letter in it from what do I want you is to react Dash chart JS number two component so basically what I'm doing here is I'm going to import now this specific component typing it from correctly so once I did that I have done a component but I want here specifically the line uh everything related to the line chart so what I'm going to do here is import and then in this import we're going to make this an object and then we're going to take it from the chart as chart JS and we can just like that comma so that's the first one here so basically this dereference all to this but then what I want is the following I want to have what exactly I want to create a line chart so I need the line element next what I want to do is I want to draw a scale so what I need as well is the category scale that allows us or this is basically the component to a graph so it allows us to draw a category scale next the category skill is basically x-axis so we can just say your x-axis related and then of course we have also the numbers which is what we call a linear scale where you have the numbers going up so we're going to install or import the linear scale component and this is for the y-axis uh next what we want to do is we want to have those dots so we can say here the point element there we are I will leave the legend in two tip for now and later on we're going to grab them and you'll see why this is so important so once I did this I can say here of course then from and then here chart.js getting it from the charges components there we are so once we did this now I need to what we call register telling to charge its library that we have these components start working with them so we say here chart.js which is basically this it's a reference from this one here and then we're going to see a DOT register so this is also when you install plugins we can use this register command so then what I want to do is just grab all of those that we have and we can just put them in here there we are and I can just remove all of this just leave that so once I have this now we're done here the next thing is starting to work on our app here because we have this here but now what I want to do is I want to create a line because the import basically the line component the line chart items so in here what I'm going to say is well let's say here uh we're going to say a line and make sure the the style that it's written it is here with a capital letter L so this must be same as well so we have here the line tag and there we are then what I want to do is because I want to put in here some properties so if you're familiar with a lot of my videos we also have a components or blocks so what I want to do is these blocks I want to use we have one is the data plug a block and the data block will be equal to data next we have also the options and the options will be equal I guess we can just make this like that will be equal to options and these will be that the constant variables or objects that we're going to refer to so once I get this closing here tag of the line and that should be fine so now we have this even if I save this you will see of course it doesn't work yet we didn't Define these items not defined that's correct because this is an object but this object is not returning anywhere else so what I need to do now is I need to start to define the object and we're going to Define it just here before we return the reason why you have to return here is just to return the response or give back a response so what I want to do now is just enter enter I'm going to say a new constant and this constant will be named Theta which is basically what it is and then in the data it's just all the data objects that you're very familiar with if you watch my charge S3 videos and we have my website so what we're going to do is we just put them here step by step we're going to say here for the labels and let's make it a labels we're going to use the string value it's an array this is string value and let's say a Monday like that next one will be Tuesday or like that and finally will be Wednesday all right so now we have this put a comma here then we have the next item and I think this should be very familiar but just in case data sets data sets this is of course an array and then with that array we can still have the object itself so we can just do it like this or we can just put it like that so then what I want to do is hear a few things so what is one of the items here as well we have here the labels to give it an a let's say here sales of the week if I save this of course here nothing happens yet we didn't just before uh give any value to the options as well so we have to Define it as well however we're just working here with labels what do we what should we have more is of course the data point so it's a data and the data is an array as well and let's say you're three six and nine so once we have this then we have the next other item is let's say background color so we're going to say background color is capital c and we can just say here let's make this uh uh Aqua or something like that that's a nice color Marine green anything you want so next what we have here and this is the background color so then what we have here is the Border color and the Border color should be maybe black and then we have comma we can just say here the point border color and the point border color can be Aqua as well of course this is a string value there we are and uh what we can do here is let's save this for now I'll just save this and you can see here something's happening but of course it gives an error yet because what it says here is like 36 20 36 20 that's of course the options all right so what we're going to do next is starting to give a constant for the options and the options is an object as well and the options here what can we put in here well first of all I'm going to say plugins and what I want to do is here I just want to see a legend by default it's already set on true but I'm going to put on true you will notice later on it will not show yet why we didn't import yet or register or an even import we can import the component of the legend and we didn't register it so that's very important but anyway don't worry we'll cover it uh and now we have here the legend and then once we have more is let's go to the scales and the scales are of course important because we have xq and ysql but in this case what I want to do here is all we can do is uh let's do the Y scale and then for the Y skill I will say here a minimum value of 3 and a maximum value of 6. by doing that I reduce the scale itself so if I save this and you can see already it starts to work there you are and I guess maybe let's comment this out for now so you'll see it will work nicely we have a Monday all the way to Wednesday so that works nicely so what we could do here for example this is all Aqua as you can see here we could change this a bit more and if you are wondering why is the background color not showing because we're working here with a line chart so if I do here comma and I will say here fill equals true we should get now a proper response all right interesting uh Fair equals true apparently uh doesn't work feel background color anyway doesn't matter I will check it later on so uh what we should do here is what you could do as well is tension and we can say 0.4 save that so we have a bit of a curve but the Curve will only be noticeable if we put in some different values here so if I do it like this you can see here we have this nice curve all right so now we have this here boy back border color background color all right then we just leave that for now so now we have this here what I do want is if I hover over this point here nothing happens and if you look at it there is no Legend and our chart is quite big we can change that or we put it in a div and if you want to put in a dip maybe you want to do CSS or something like that of course uh there is if I click on this we get all the files here you can do something here anyway this is just default thing it's not even important to know because we're not focusing on that however I imported the CSS app file here as well so what I'm going to do next is well let's start to change here maybe the size we could create a new div for now which is usually recommended to do and we're going to give it a style and this style is of course an object now I'm going to say here for the style is for example you can put the width here of 500 pixels which is a string value and then we have another comma I'm going to say your height let's say this will be 800 pixels or let's make this 800 or 600 and this will be 300 that would be better so then put a string here and if we save this all right interesting we're gonna filled item here did we put a comma of course so what is going on here but I forgot to put closing divs and tags here so there we are all right so then we have this make sure we put this in the proper location we have that one here we have here another div and I want to indent this there we are so the line tag is nested within this Divi save all right interesting we get another mistake here so on 94 49 13 49 30. we have the width and we have this here and the height hold up all right so of course there's a tiny mistake in here which is make sure that we have another bracket in here because it's an object itself so if I save this there we are so we have now this here we could even move this a little bit to the right but this is just CS pure CSS basically you could say you have padding and we can make this uh 20 pixels all over item there we are so let's trigger the legend here so we have now this item and the tooltip and the legend should be shown so what I'm going to do here up we have unit Legend but then what I need to do is I have to first of all put a comma here then I'm going to say here the legend element or component comma and then we're going to say here Legend component we have to register it if I save that refresh there you are you can see it already shows it shows just undefined so let's see why is it undefined because the term here is labels which is not allowed of course it's label so if I do label save that there you are sales of the week all right tool tip are you showing not yet let's do the two types comma I'm going to say here to tip now we have a registered but of course we need to import that component so it's a tooltip as well here save that and refresh all right and then there we are look at that beautiful and this is basically the very first item here on how to create a simple line chart with react chart.js2

Channel: Chart JS

Views: 24,452

Keywords: how to create line chart with react chartjs 2 in chart js, create line chart with react chartjs 2 in chart js, line chart with react chartjs 2 in chart js, chart js, chartjs, chart.js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.9.1, chart js 3.9.1, chart.js 3.9.1, react, react-chartjs-2

Id: cxKNhSzxafg

Length: 13min 27sec (807 seconds)

Published: Tue Nov 15 2022