Chart JS tutorial for beginners | Chart.JS Tutorial

in this video we're going to explore how you can use charges so basically this is a video or a video series about charges tutorial for beginners really exploring how chart js works and exploring under the hood how charcoal x really functions i'm not saying this will help have you or will give you benefit in going more deeper afterwards and understanding the other videos that i have so that's a very benefit for you it's a big benefit all right let's start and let's start with the basics so you can see here right now i have a very basic template here this html html file is almost blank and what we're going to do is number one i'm going to put in a basic bootstrap design just for visual visual or at least something visual to see it that looks a bit more appealing and then after that we're going to look at chart js how we're going to put in charges in here so first of all let's make a basic design in this design i use very consistent in my do to me course about charge is and i highly recommend if you are interested in learning more about charges check out as well my udemy course which goes which dives deep in everything all right so first of all let's get here this is the introduction this bootstrap 5.0 which is in beta and all i need here is basically the bootstrap basic style starter template that's the one we need all right we got that i'll just put that in here once we have i'm going to remove all the excess data here or all the excess codes this is useless for me you don't need that now all right we have this one here i'll just put it in here and we can put this in here all right so now what i'm going to do is i'm going to make a quick design here i'll just give the background here for the body pg success to give it a green background and then in here we're going to make a div and this div will be a column eight is an offset of two so we have a card we will put it more in the center or that card will be the focus where the chart will be in so once we have this in here we will just make a new div as a class this will be our cart and we can close that and in here we will have div class we say here body cart let me close that as well and what i will do here is i will make a hr line and i will just put it this here between all right and then i'll make this because i want to make sure it's small this doesn't have to be so big there we are so in here we'll put in a canvas so let's save that refresh so we have this here all right let's check let's see do we have extra text here oh that's this one here bob we're going to move that and what i want to do here that would probably be more suitable is to give a margin yankee number five so we push it more down all right that looks slightly better this doesn't look that nice to be honest but i guess this is the reason why card body sorry about that all right there we are that looks better now what we need is we need the charge.js library so we go here charges.org click get started and once you click get started you get here the information here we have here a basic chart already built and that's fine you can use this one or you can click on getting started you can get here the canvas id the script the javascript and then you have here and this is a basic line chart so we can copy this i will copy this part here and i will copy the code here and after that we will just make the the line chart as well we can copy all of those so you can copy this all right once we did that i'll copy the javascript or the javascript library for charges and what i prefer i prefer to put the javascript below the bootstrap so or the the charges and here there's a newer version already the most updated version is 2.9.0 i know there's a beta right now running at 3.0 which is wonderful if you would like to try however for for now we just use the 2.9 this is the most updated version that's fine i already saved this one so i will not use this but you can use this there's no problem and the reason i'm already saving my desktop is to save time in loading so i would just say the chart.min.js all right that's the minimize version of the quotation here and here we are and then what i get is the following you can get this piece of code here we will get this and let's look here we type in here script and we have a closing script all right and then in here we will put in our beautiful code here we are all right so now we have this and let's explore what all this reading means so if i have this here and go back to our chart here now we have this that looks beautiful looks like a nice line chart exactly what we want so what does this all mean and how can we really play around with this so we have all of these codes now you might say okay this code is wonderful but what can i do with it because most people will see a chart yet and they see a very static chart and what i want to do is here is i want you or i want to dive deep in all of these this is really a basic tutorial understanding how we can play around with this understanding what this is once you understand these basics here you will understand more better how you can go more advanced and how to go deeper and this is really one of the most important things because this will be eventually eighty percent for you will focus on while there's charges if you really look at charges here they have this very complicated or very extensive library with all these functions but the honest truth is that these functions here all these options here will be used very very limited you'll be playing more around this values data and colors than you will do with for example the hoover point with yes or something like this well these are fun to play around with but they are once you have the basics you will not use that much unless you want to invest more in the design however the data is the key for for the chart because that's the one you are going to focus on so let's look at this and let's understand what we're going to do here so we have this here so let me just explain this part here so we have this variable and it's a ctx this is just a variable that we assign in ctx stands for context and you can use anything else it could be anything for example in our case let's say this is a beginner chart we can use this one here and so we have the canvas id so first of all why we have this canvas with an id chart js is canvas based meaning it will draw the chart in canvas so it's not a javascript it's basically a canvas but that many means is the following let's open up our developer tab here and then if you open up this you're going to search on this you will see here now you will see only the canvas you don't see these dots here you will not see them why they are all drawn in in this and from there on it loads then it starts to make one picture and that creates the issue in controlling because many people struggle for all right how can i adjust all of these data points or the color of this if i cannot see here you have different type of chart of chart libraries that's why you have the javascript library for example c3d3 is deeply invested in javascript it really draws in javascript and you can see every data point charge as does not it uses canvas meaning that they are they tend to be pixelated but they solve that with some pixel pixel codes that you can use as well because as this extends it will not be so flexible although they figure out how to make it flexible and but if you make the width width or height bigger sometimes it might look slightly pixelated but there's a solution for that by the way so that's that's it that's the basics first all right so we understand this now so it is a canvas it's not a javascript or no single id or html element of that so it's just only this canvas id and from there on everything has been drawn and it's sticks in one item so if we look here right now we have this variable context it says equals document get element by id my chart yeah so which element is this well it is this element here is the canvas element with this id name and then it says get context so get context basically indicates to draw something in a canvas this is the command this is the command to draw so that's basically what you're saying here so this this variable is to get an id and start to draw something if you want to change it let's say we say beginner chart we can change this to here make that beginner chart and this we can adjust as well we can say we can change it to something else or we have a new variable with a variable begin a chart as well maybe we want to have that equally the document.getelement yes get element by id what's the id in this case it's the beginner chart beginner chart and then draw so get context so make sure you spell it correctly but you will get an error and then here single quotation 2d all right draw this stuff so we can remove this if you remove this let me just copy this and put that in here save this you will see nothing happens or it will not change anymore basically it's the same the only thing is that we have adjusted the id so there's no problem in that so that's the first one and then it says here variable get the chart variable chart new create a new item or neutral or draw this the following detail points data points this is what we're going to make first the type what is the type you want to create that's here in the beginner chart so what is the chart which we're going to draw here and this type here can be different so for example we have here bar chart you type in type bar chart refresh and then you can see it starts to adjust into a bar chart this here helps you to really understand or it's basically it says because this is pre-programmed in chart.js to draw this and if you would do here pie chart let's save that refresh now you can see it works but of course the color codes are different than all these things because the main reason here is we have only one color and the the setup was basically for a bar or line chart because those two are very similar to each other while pie chart and polar area chart have a very different structure the same as the doughnut chart if you have donut charts doughnut chart make sure we spell it correctly refresh and now we have a donut chart area all right so let's go back to a bar chart that's probably the one we want to use most of the time anyway so we have this bar chart here all right so if you want to adjust this so basically this is where people struggle how can we start to adjust all of these items here or let me first cover these before we start to adjust or communicate with this so we have here the following so once we type or once we draw the bar chart what is the next one here is basically the data set or the information the data with the information in here so we have the data in the data we have the labels and we have the data sets so this part is very important as well because here it starts to indicate this here is basically the information here below and in pie chart or in the donut chart you will see that this data is starting to be used for the legend as well so this is the legend depending on which type of chart you have so but if you have a line chart it will work with this label as the legend and the same as the bar chart as you can see so we have these labels here and this is basically helping us here for the values here on the on the x-axis indicating the values or the data points and what category they are and then we have here in the data sets the label which can be the legend depending on the type of chart for line and bar this is the the legend for pi chart or the circle type of chart polar chart uh pie chart and the donut chart it is the legend now we have here the background color so this is the background color here indicating the background color of our our this is for our chart the line chart bar chart or any kind of chart using the border color and the data here so if you adjust the data one let me do this five if you do this 10 15 and a 20 this will be 25 and 30. all right and let's refresh you can see now we have this type of chart so it works this is the values you can see here this is important you can see this bracket here indicates an array so this is an array of values so if you wonder what is an array of values arrays basically this so if i talk about car as you can say for car brands you will instantly know different type brands for example ford tesla uh toyota et cetera et cetera i'm not even toyota sorry this is the right way to spell that i'm almost misspelling it but this is basically an array so an array consists values within same as color if i say color blue red green yellow brown etc etc that is an array array of colors so so in a value it can contain multiple values depending on if there's only one single value and it's not a number it's a string yes this is a string here this is a string value this is a string value and the reason why you can see there is a sync rotation indicating the string value if we look let's look at the documentation for this to get more better so right now we're on a line chart let's go to the documentation here for line chart and then we have here the data the data sets let's see if they have any information about line chart probably not that much here and the reason why is this is the basics you need to know let's see here their introduction if they have that here doesn't show you exactly you can see here the examples they give and this this is the array this is an array you can see here the label this is our all strings basically if you will go to the line chart here line chart you can see here the following the type what is the type scriptable indexable et cetera et cetera all these you can see the type if it's color it's basically a string because you put in text although color can mean multiple things so let me show you here here we have rgb rgb color we can also use a rgb alpha color or rgb a color so let's make this an array yes what's an array an array is a value that contains multiple values so let's say here because we want to give more colors in our situation we want to have more colors in here so we'll say here our background color is the following we'll say here our background color this is first and this is fixed color this is why charcha shows you colors colors indicate if you click on that it indicates multiple color and multiple color patterns let's see if they have a uh sample here not really oh there we are so we have a it's a string it's a hexamer of a hexadecimal rgb hsl etc etc so we can use these so let's do some samples on this so we can see so we have these samples we're putting this here for example we have this one here and i'm going to give this 255 there will be a very red color and then here next one will be blue the next one will be a hash hexa decimal so we say here hex for hashtag zero zero nine nine zero zero all right so it gives an error here or it gives another note because we need to put in here a string it's a string value remember that so we have here in total now one two three four values while we have here uh four seven values so basically there might be some items not getting any color so let's see how this will look like and you can see here now well this shows you is as the data points are being adjusted let's adjust this to bar chart so you can see more clear that and refresh you can see now this is the first one this is the the rgb uh let's see here was it the rgba color where you can make it more transparent let's make this semi-transparent fifty percent you can see it's getting more more clear because the alpha of a value is getting higher as the higher the alpha value gets the lesser the transparency becomes so if if it's almost to zero it's basically one hundred percent transparent let's save that refresh you can see here now basically you don't see it's 100 transparent so you can see here these colors are not being colored it just becomes gray because it doesn't cease the color at all all right so you have this understanding now here these are the basic understanding labels here this is basically uh not necessary here because we always sorry we have the labels and you have the label here and then we have the the border color border color works exactly the same way all right so probably make some sense if you want to remove values we can remove some values to make it more matching for example we only have four values we only have for the month until april let's save that refresh and now you can see this starts to get better i'm going to make this transparency zero let's or reduce the alpha to 50 only let's make this five there we are 0.5 will be a 50 transparency as you can see the lines here true that means it's transparent this one is very solid all right so now we have this here we can play around with the border colors and you probably understand this as well so what is important here now you might say okay i get this this makes sense now i see these colors and this is what most people understand these are the basics they say okay well maybe you can do some advanced stuff with the bar chart or online chart well we can do some let's let's make some advanced stuff here with the bar chart let's say hoover data or border with we can play around with the border with let's do that one let's do a few here let's put a comma here remember if you have the array and then this is the last value of the array how do i know this is an array if you see these brackets it's an array within an array so there's an array this is an array and this array contains multiple arrays all right so if you have this just make sure you put a comma here and then we say the following here for example here the border with border with and then here we can put in what is the value here border width is a number or an object so basically it's a number it's scriptable yes you can put zero and we can let's say put the border with is 25 let's see what happens if we do 25 let's save that so if you go back here refresh as you can see here now we have taken out the border yes the border width was very thick and if you don't like the color well we can adjust the color here let's make this color this is the border here let's give it an array value by putting in brackets and in here let's put in red comma and then same quotation this will be green comma blue comma and it's imputation yellow save this refresh and there we are so now we have these border waves here that that matches up and you can see even this here becomes matching with the border with here of course this looks extremely unkey pleasant so let's reduce this to maybe one the waterways will be one back here all right this is basically the border with so you can do of course more commands you can play around with the background corner the label what do you have more here border skipped etc etc all of these things are nice the data sets percentage bar thickness etc etc skills you can do extremely advanced stuff all right however i can imagine this is the one where everyone struggles and this is the one you really need to know this is the the understanding how you can get this data or from under the hood all right so this is what i call under the hood because this is the part that really is important so we say here console.log in here and how do we get this data so you might say okay this is nice but i want to get for example these values how do i get these values how does this really work so we get the type here yes so we have the type it says draw this this bar chart and then we have this data here how do we extract the data set so to to do that we need to have the structure of it to understand how this works we look here up we scroll up to the top here in the in the bar chart let's go here top let's see if we have an example here we need to look at the name space where are we where are we skip element rectangles we have some here we have the names let's see i think i need to go slightly higher no we just went here border border border all right this is the data set properties all right so the name space doesn't show here so i'm going to show it to you directly so how does the name space work or how does this value works well if you really look and understand this part the logic behind it is based on the this variable here this variable is a new chart and draws a new chart and this draws the new chart in where this id what is this id or this variable this variable equals the following id which is our id this beginner chart and what is the beginner chart id or which element is this well this is our canvas we go back into our canvas so basically what we need to do is we need to say in in javascript if we want to get let's say this data here we need to break it down where we are going so basically we say go to canvas then we say we go to id whatever the id name is that is in this case the beginner chart then in here we are going to get for example we want to get the the label so we're going to go into data then go into the data sets and here because this is an array in array very important yes so we say here data sets number zero yes the reason why because this is an array already in itself we can put in another one here if we do another one between here for bar having another bar chain besides or multiple lines in a chart you can you can have it like this all right so then you have next then where are we going for example we want to get the uh what's that you want to get the label here so then we say label all right so this is how you get that so how will we get this this canvas id with this part is basically chart this variable here yes it covers already this so we can cut away this and we just say chart so to do this let's cut this here and move this in the console.log area to do this we just say the following we say chart dot data dot data sets and then we have zero dot label all right from here on we basically have the value so if we say here variable abc equals this let's try to extract this one right now then we can do the following here no we have abc let me say here a b c semicolon save this no then go back here open up the developer tab and you can see here now our message you can see here in the console log the message will be my first data and this is basically how you start to communicate this is really the under the hood part so let's try another one so i'll give you another chance how would you get the border width if you understand just what we did you now understand how we can get the border with let's copy this one or let's type in here variable so we can say your cons then that's probably more better the prop array do it and there is a border line border size all right equal what is the border well chart dot data for here dot data sets the first array which is zero the first value in array and then we say here border width so we say dot border width all right once we did that we can do now here again console.log here we say border size save this so now you will see if you refresh we have two items here what is the border size the border size is one and my data set equals or this is the first one the abc variable is the my data set so now is a question if you understand this part how would you get not only this but let's say you only get the first or the second value here all right but let's do first the basics here let's get this here the border color you probably know now again here const and this will just make this updated to the latest version of javascript which is probably better cons and here as well comes so we have a constant and here cost all right so we got these here now again so we have here the following what is here the value so we say here and we want to have the border colors border colors equals but we're going to extract this event the entire array so we say here again chart.data.data set 0 and then border column is capital c make sure that's capitalized so that's the exact variable then in here console console.log open this up and then you say border colors here all right border colors this const so we get that cut save this refresh now we get different color values red green blue yellow and that's exactly correct but maybe it's well wait a minute i don't want this i want the border color green how do i get only the single value extracted all right so that's basically in the arrays understanding arrays will give you very big benefit this is basically what you're really learning you're learning how to talk or how javascript is visualizing logical code into a picture and now what you do is basically extract the logical code out of the picture so basically what you're doing is now the exact opposite of what you first did and that is really fun this makes charges extremely fun because it's like a puzzle all right so let's do this again and let's explore one more time and now let's get the green can you extract the green do you know how i'll give you a few seconds to think about just think about how will you do that how will you do that if you understand this is an array then basically you need to know that array contains multiple values so if you would think about it the border color so basically it's this i'm going to add it in here let's put it down here later on i will i will comment this out because this is later we have to delete this basically here if you would get this then this is the array number one that will be zero array number two this is number one or yeah that's the way how it works blue is number two and yellow is number three so why is that well sadly enough i don't know exactly the answer why the the array starts with zero in but it's the basic pro uh sys systemize or structure how coding works they start the array with a zero and then so the first value of the array is zero the second value is one so if you want to extract the second value of the array we need to put in this number one all right so you probably guess now what we really need we just need this number one to extract the first or the second value which is green from the border column all right so let's try that so const is a border green equals a chart dot data dot data sets dot zero oh sorry dot zero bracket zero and here border color bracket one semicolon and let's add another console.log and in this console. we say border green semicolon save this and then let's refresh now you can see we extract only the green and now you say wait a minute green oh i see this is green well that's correct you can see here we're talking about the border column the border color here is green so make sure you pay attention that don't get confused between the background color and border color so you can see here our console log is showing the value green so this is exactly what we want so now you're understanding communication with this so if you would like to adjust that you could basically adjust the variable with that where you can update the variable but that's more advanced item but if you understand this you can understand how to update this so now we have this all right can we extract i'm going to give you an exercise now can you extract the label labels can you extract the background color let's say the the blue and the labels april and can you extract from data 15. so how to do that so let me write the number one extract in console the label april april we're going to get this one and then number two we're going to get the blue on the background color blue and number three let's extract what was that the number 15 from data number 15 from data all right you probably guessed it yes but i will give you a few minutes or a few seconds i'll just you can pause this video basically i will not stop here for five minutes and do nothing so you probably guess what we're going to do so if you're not sure just pause for now and try to explore yourself before you continue on and if you're just curious how to do it well let's continue on i'll show you exactly how all right so here how do we extract in our how do we get in the console log april now let's look where's april we know that april is here the fourth one in the label so is the array this is the fourth value which is number three in the labels all right so we go here from chart data labels number four all right so we're going to do that one now we say console log nope before we even do that we need to make a cons comes and this one will be i'll just put it here i'll say april so we know that this is april cons we'll call this april that would be a very nice term all right equal and then where are we going well chart chart is the first part here data labels then we go to data data and then we go to labels and this labels will be the third one because the fourth value remember fourth is the third because it starts with zero first all right once we did that we've got that so now console.log will give you the following we say april all right so once we have that what's the next one so we can remove this and i will say the next one is blue so that will be the new value let me say your cons blue i'm not sure if this is a lot because it might be a color as well so i just say blue color so probably it's a lot but i'm not sure because sometimes javascript doesn't allow certain terms which is like variable or something that's already used in javascript probably blue is not used but that's all right for now just to be sure then we say here all right how do we get the blue color where is the blue color well we need to go to chart from chart to data data sets and then we go to background color and then we go to the third value in the array which is number two all right so we say here blue color is chart dot data dot data sets that is zero all right so data.datasets and then we go to backgroundcolor i'm going to just copy that background column is capital letter c make sure you copy that and then what was the value if i'm not mistaken number two because this is the one this is 0 one two all right so this number two third value in the array all right so we've got that and we can just say here console.log and then we say blue all right final exercise now we have to get number 15 from theta how do we get number 50 from here probably guessed it as well and if you followed along or if you already did it you nice to do it well you're good you're right on track that's very good so chart type and data oh sorry chart to data data sets and here data number 15. all right so we say here again comes and we say here num 15. now i'm going to give this as the value and what is the cons or the variable of this chart.data.data sets all right and this is the first array so zero and then we say here in the data number 15 that's the the the fourth value which is the third one in the array so it's a data data dot oh sorry not dot bracket three all right semicolon here let me say here console dot log open this up and then we say num 15 let's save this refresh and let's check here all right what happened here blue is not allowed let's double check all right i'll just remove that of course make sure you have the same colors here sorry about that refresh and then you can see here the following value we get green we get april we get blue and we get 15 and this is the one that we just did april blue and number 15. all right so now we've got this one you probably now start to understand how this works so you understand how to communicate but we're not done yet you thought we're done no of course not just have the basics on this because there's still more all right let's play around with more data sets because now we've got more fun this is why in data sets you always work with zero we only work with zero so far now let's play around more so we say my second data set and here i'm going to give it some extra colors new colors new designs let's say here pink gray purple red all right for this here i will say orange cyan light blue and blood orange if i'm not mistaken that should be a color let me give this difference say 4 or let's make this 15 [Music] this will be 10 and this will be 7 and it will be 5. so it's a declining chart all right i copy this make sure you have the comma here for the other a and make sure you don't put in the double brackets the brackets must be covering the entire data set if not you're breaking the array so save this let's go back here refresh and there you are so now we have some new data sets here and you can see here some different colors and this looks quite nice and if we change this to line save this there you are you can see now the lines are exactly the opposite all right that looks very nice but i do like this more or less see what happens if you have a pie if you have a pie you can see here it will start to create multi-level pie charts or multi donut doughnuts are always very nice to look at if you do this save this refresh it looks a very professional a multi-level doughnut chart all right but let's do the bar chart because this is the common one i prefer to use most of the time nope and that's a wrong press excuse me sorry about that refresh back here all right so we are here we have all these messages here so my question for you is the following imagine you want to extract now this purple color here this is from the background color how will you extract this purple here from this background color and then i want you to figure out the way how we can extract as well from let's say from this the my second data set how can we get a console log and get my second data set in here see if you figure that one out because this one is slightly different and the reason why it's different is because we are working now with multi data sets here this is what many people are struggling how can use multi data sets and if you want to do it even more complicated let's make it even slightly more challenging third data set oh data set let's make this marine and this will be a light green and this is uh what do you call it well green blue that would be i think that's the color though blue and brown let's copy this and i'll just copy this here as well but then in the opposite direction oh well maybe it's cold and better apple green i wonder if this is a color for green and then we have near corn flower blue that's just what's top of my head i remember this one so that's a nice color as well 15 15 15 16 and it's again 15. there we are so we get all kind of colors what happened here apparently this color here this is gray my not mistaken gray we have your cyan um let's see here we go brown gold am i correct dude which color is this yes this is the third data set that you can see here that's a good one figure out what is this color here right now so you can see this is the third one here the first one marine blue probably that's the right term no not at all all right so it doesn't matter background color uh i'll just give it another color light brown oh not brown sorry about that wrong type doesn't work as well all right doesn't matter let's play around with it and figure out what is this color here can you get this color out here can you get the third one as well let's get the third one here and then we get this purple here and we get the second data set so let's do another practice so what we're going to do here is so we need a few things we need purple we need the second data set label and number three is we need the missing or broken color that i don't know why it's yet broken what is the value here all right let's try here so make here constant this counts will be purple and what is this cons so if you understand here where are we now purple is this and just from looking at this chart you should be able to figure out that the background color it's in the second data set is in the second data set as you can see as well in the tooltip you can see the second data set and the second data set you need the third value so this is the third one in the array that's the number two of the um there's the second the second array value yeah so i'm hoping for being clear remember our array sub is zero zero one two so that's number two in here that's the third value is number two all right so let's get that one that will be number one so how do we get the purple so it's a chart data and we go to the data set and our data set this time is the second data set remember it's in the second data set here so we are going here from data sets and then we say number one remember number one is the second one and then we're going to go into the background color the background color and then purple which is the third value in the array so that's number two so it's a background color we copy this and then we say number two all right got that so now our console.log will be purple and we'll show purple all right and make sure that console.log is video dot not a comma because it will give you an error all right how do we get the second data set a const let me say second data set equal well where is the second data set well it's basically here in the label so we say here we chart data data set but then data set in the second array which is number one and then label all right that's what we're going to do so we say a chart dot data dot data sets in this data center number one and then we say here label there we are and then we say console.log we have this here we just copied this finally let's explore const and i'll give this cons missing color because that's the one that's giving us an error let's explore what this is where can we find this first of all we do know one thing we know it is in here which is in the third data set and it's the first value or first color value of the data set the third one so we say dot data yeah so let's look here we say here data data sets that and then i'm going to look for the third one that's in here that's number two then in here the first color which is light brown so now it's a data set and this is the third one so that means number two the second value or the third value which is the the second number two for the food array and here background color zero all right once you do that console.log and in here we say missing color let's figure out what is our color we probably already know that let's save that and refresh so the moment we refresh we can see the following here we want to get the purple that is correct we extract the purple next we figure out the my second data set which is this one here we're able to figure out and finally we have the light brown apparently light brown is not a color in html or not a text color so we could do something else here so instead of light brown we could let's adjust this let's make this a rgba and then we say here is 100 comma 200 comma 250 55 all right and save this so once we save this let's see what happens now it starts to work again now you get a color here and you can see this starts to match and this is basically how you can use chart js for under the hood and we're not even done so let's look here here would be a question can you figure out this one here this one will be a tricky one let me get this one here so if you are here you probably will figure out well this is probably simply this you can say here comes type or chart type i'll just keep it chart type equals chart and then type we say chart dot type semicolon and then we say console.log and then we say chart type all right let's save this and see what happens there you are so now we did that you can see here it gets undefined why is it undefined well it doesn't work for this one it doesn't work the reason why this is in the config settings so this is in the config for the configuration basically so we need to put in here a different term so we say your chart.config and then we save then you get the bar chart so there you are so now you have that one so if you change this now to pi or let's say line i like to build five because it's slightly more nicer for us here right now if you look at this that looks beautiful you see now we have the pie chart these are more advanced ways because with this you can now start to communicate more advanced and you can play around with it so with the options as well so let's look at the options here let's go into bar chart or to well we can do in the bar chart and let's look at the some special configurations for the options where we can do some advanced options all right advanced options is for example legend yes so we say here legend and legend show you can see your chart this is basically the name space here you can see the chart defaults global legend and options options legend name space all right so we're going in the legend and we say legend let's go back here we're going to hide our legends what is our legend this is here right now the legend we want to remove this we don't want this anymore so we go to here options let me say here legend and legend here is if i'm not mistaken a array itself yes option and display yes that's an array and let's go back here now we say here this is an array and then we say display let me say false let's save this refresh and there you are so now we hide the legend which is nice we can even do some other options here as well we can do all kind of options because these options are related to legends itself and all these positions here online etc etc etc not important for now that's probably more a bit more advanced however if you want to communicate as well with this part you probably figure out here we can go from chart and then we go to data or instead of data we go to options legend and then we can set here here we can check here the display all right let's put in here cons now we say uh legend display let's get that value out of there equals so what are we equally what is this value well this value is the following we will say here options dot oh sorry not no no no of course you start with chart yes number one the chart because that's the one we need that's the const the variable cons chart options legend display uh options legend and this play semicolon and then we say here console.log and then we do legend display semicolon save let's go back here refresh and once you refresh you can see now we get the value false is that correct our value is set currently on false so if i say here's something very uncommon let's say one one one one let's save this refresh it works here the legend doesn't it doesn't trigger the command of hiding the legend but you can see here this is our value here so this is the way how you can communicate and you can even update it so you if you would say here for example this one will be variable or it comes what is the const let's say here and we're going to put the const here and i will not even put this in here but i will say here this is false let me say legend display we can just comment this out i'll just put it here and then we say here letting display now this is just only a variable we put in here and this variable will eventually show here the legend display to make sure that we have that we know that this is the legend display i will put in here multiple ones save this refresh oh the identifier and this may have already been declared all right of course this is not allowed you're not allowed to do this multiple times or that's the detail of this so we are not confused because i figured out that that's basically excess baggage let's save this refresh now you have your valuable here there you are so now you can see here specific values we have our cons our variable here like in display it shows false let's update our values here as well with a value let's say the data here will be data one all right that will be our our item so we say here const data one equals and then we say here let's say make these crazy numbers 999 111 and two three four all right let's save this before i save this semicolon save this refresh and now we get huge values as you can see here but probably you cannot see it clearly here the reason why you can actually see it clearly while you see the values here this is relative because it's such a working percentage so i'm going to change this to a bar chart so i'm going to give you the assignment how will you set this up to a bar chart well you probably figured out right now put in here you make a const you say here bar chart equals bar chart a bar that's the one you want make sure this is a string value semicolon and this here will be removed and then you say bar chart let's save this refresh and now you can see here the peaks that we have on the first one there we are so if you want to set up multiple values like these like data one then we have another data another data one and another one here data two let's save this and then i'm going to make a theta 2 here data 2 and let me say data 2 is 250 11 99 and then 99 exactly the opposite of almost the opposite almost the opposite of data one let's save this and refresh and there you are you can see now our 250 is here well this one is 234 99 here 99.99 all right this is 11 and here we have number 99 as well all right so this here is really one of the basic parts and understanding how you can communicate variables moving it into a data chart with this you start to really understand this is in my personal experience and opinion the most important part to understand once you understand this you can do more nicer stuff and there's a lot more check out my chart.js course on udemy which goes deeper and has more items in there check out my other videos as well and the most exciting part is once you know this you know how you can start to communicate with other data and inserting your data here into this part here so what you really learn now is just this how you have your canvas here and how you can communicate with cameras and how you can decipher basically the canvas items here into basic code and how you can re-communicate this code into a picture so that's really most important part of this uh charges tutorial for beginners understanding this is the key and i will make some other videos related to this so i hope you enjoyed this video if you like this video subscribe to my channel channel and if you have questions regarding this or you still struggle just put them in the comment section below and if you want to know my characters course on udemy check out the the description box just below the video you can find the link in there

Channel: Excellence in Excel

Views: 10,151

Keywords: chart js, bar chart, chart.js tutorial, chart js tutorial, js chart library, using chart.js, chart js bar chart, chart.js 2.0, chart.js 2.0 tutorial, chart.js 2.9, chart js tutorial for beginners, chart js multiple datasets

Id: NySBh_DIRlg

Length: 57min 20sec (3440 seconds)

Published: Thu Feb 11 2021