How to Create Doughnut Chart with Labels Outside with Connecting Line in Chart js

in this video we're going to focus on how we can create this wonderful donut chart here but then with a line connecting to the slice and showing the title as well outside and you can see here if you hover over it shows it and it shows the matching colors as well and this is very interesting to do because with this you don't have to basically have your tool tip so let's start to look how we can create this connecting line get the table forget the labels and then of course getting the starting point here nicely on the donut chart in this video we're going to focus on how to create a donut chart with labels outside with connecting line in charge.js and this question well this question came from multiple places already i've seen it very often however i never created a video about this so let's start to focus on this and you might say and if you're very familiar with charges there is a label outside plug-in or it's called a charges pi l outside labels but that one sadly enough is not suitable for charge s3 it has been updated for the latest version so that would mean we need to create something our own so we're going to create our complete own plugin based on this so what we need to do first is go to chargestreet.com getting started with this specific link here and get the default code so what i'm going to do here is and you might notice this for some reason my google chrome gives an error anyway scroll down here copy all of this information here and then we're going to just paste that in here once we've got that cut out this title here put it in there all right and then save this and refresh there we are so now once we did this what we need to do now is to start to convert it into a donut chart so we're going down here we say here donut and then if we do this of course our skills needs to be removed because there's no skills in a donut chart save this refresh all right we get here something and then what i want to do is i want to reduce this amount here to 400 pixels refresh and then what i'm going to do is i'm going to do some adjustments because this is currently how we have to do it because if we're going to put these lines connecting lines here we need more space on left and right we can reduce the pie chart size but what would make far more sense is to make a rectangle instead of a square and i remove all these labels or these legend values here because they don't need to be shown if they're already shown with a connecting line so what i'm going to do here is just go in here options we say plugins in the plugins we're going to say legend let's go say here display box save that refresh all right so now we have the first thing the second thing what i want to do here is change basically the aspect ratio so i'm going to say here just below your options maintain aspect ratio and pay attention to the letter a and letter r which are capitalized we say you're false comma if i say it is now a refresh you can see here now it becomes more like a rectangle shape which is perfect for us because we need some space at the side to show these values here all right so the next thing what i want to do is i want to make this this donut chart or the ring of the donut chart a bit more thinner we're going to have a cut out percentage to make it nice and thin so in here per comma and i would say cut out and then we say here let's grab i think 90 or 95 should be sufficient so let's say here 90 percent if i save this now refresh there you are that looks already a bit more nicer and then what i want to do here comma just for the sake of it i bought a radius and that makes it just a bit more appealing so border radius and we say 20 pixels save that refresh and there you are so that starts to look a bit more nice of course you could do an offset here if you're desiring that you can do your offset and also means some place a space between let's say here 10 pixels if i do that you can see here now it starts to add some space between and it expands a bit in our case or in my case here i will not work on this so i'll just leave it like that all right so what i want to do now is basically the following we need to create now a tool tip or so another tool a plugin and you can see here we want to have the line but the line should be at the center if we have a connecting line it should point to the center of every segment of this donut ring or donut chart so the best thing here is that the tooltip has the x and y coordinates that is exactly in the center so if we can pinpoint that it becomes extremely easy for us to work with because finding the official center of it is quite tricky because basically if you really think about it this is a ring it's 360 degrees and here would be the center and then we would have to calculate with the to calculate triangles that's a mathematically very complicated item especially depending on the size and it can change every time so having the ability to extract just the tooltips here is absolutely a time saver for us so that's what we're going to do now i'm going to create a plug-in and then in here we say your comma there's a plugins and let's call this plugin or what's a nice name donut i know out labels or donut labels line all right very simple nothing fancy just something simple and in here i'm going to say this and then i'll say your plugin this is our donut label line block and then we say your constant instead and then here curly braces and then we say id put in the donut line here this is basically optional because only you would need this if you would do something in the options here as well but anyway that's all right for now just have it in case we need to do something and then what i want to do is basically the following and in here i'm going to indicate the timing for drawing so we say here uh after draw meaning we want to draw everything first and then the very end these lines will be added and then we can say here to follow we're going to get your chart comma arguments comma options so most of them we won't be using the only one that will be important for us is the chart right so and then in here goes a constant and this content will be a object destructuring equals chart all right but here we're going to say ctx comma chart area and this is important i'll tell you later on why now we need here well we can just grab all the items top the bottom left comma right and i want the width and the height very important so what are they basically they will indicate the area where we work with so this is very important because if you would have a legend your height or your your starting point of the chart is somewhere here below because there must be a bit of text or space available for the legend which makes sense so that would mean that your starting point is lower and then that that imaginary line will the tooltip or sorry not the tool to be donut chart starts would be called the top part all right so this is very important and the height would indicate that the height minus how much the legend takes so if you really want to learn more about that i would say look at my other video about how to create an arbitrary line in charge yes because that's specifically on the uh line chart it will explain it and varchar will explain a bit more because here we don't have a very strong visual of the chart area basically chart area right now is just this 300 by 4 or 400 in width by 300 that's the chart area here in a line chart project bar chart is slightly different so watch that video i highly recommend you to watch it if you want to understand more about them for now i want to go deep into it because a donator doesn't really have these scales on the x's so it does have an area or chart area but the chart area is basically the full campus which is normally not the case for other types of charts anyway so what we're going to do now we have this here and probably the best thing would be now is just to put in here something so i'm looking at some extra space and here let's do console log and just get the top of our items if we do this now refresh you will see here which are not refresh but also open up developer tab you can see here zero if i would do here legend well let's move this so it will be set on true by default you can see now it's 4 54. so that was the space here this is very important information anyway for us we don't need this what i want to do now is we need to go and loop through the item we're going to use a for each functionality here we're going to get the chart so if we're going to graph your chart i'm going to show you this refresh and you can see a lot of information don't worry about that but the most important one basically in here the following in the chart i want to go here and search for data let's see here let's see if i can find the data there you are this is the data which is an object itself and this object of course consists of all the items so what i want to do is i want to look through each data set in this case we only have one data set so it doesn't matter so much but we can look through them using a four each so if you would have two or more it would create eventually additional lines although the lines here to be honest are not very effective if you have a a multiple doughnut chart ring of like a multi-layer doughnut chart so in this case it's only single anyway let's start with this because now we know exactly where you can get the data you're going here we say dot data and then dot data sets if i save this now we should see here just only specifically the data in here single data set and then here all the information so what i'm going to do now is the following i'm going to say here a chart and they're going to say dot data dot data sets which is basically the upper part let's see a dot for each and the four each allows us to look through every data set we have of course in this case we only have one data set we're going to say here data set comma i can see i for iteration and then here we look through them because this i or this is iteration or index sorry that would be the index basically but i'm going to use i here later on i'm going to use index for another for each because we need to use two for each first one loops through the data sets second one will look to the data points as you can see here so this will be both of them will be in here so this is very important in here what we're going to do is the following we're going to say here all right char dot get data set meta then i'm going to say here i i do this to console.log here let's see what we get save that refresh all right so what happens now is basically we get all the data we need and you view the data set the parse values etc etc and even the data and as well a lot of x and y coordinates which shows us a lot of important information here for us eventually another item will be very important which will be based on the value so what we're going to do here is the following i'm going to say here this we're going to look through this because here basically we get the data set meta which is then data set number zero because there's only one data set here so then we can say your chart we're going to grab this we'll basically just grab this put it in here and then we say a dot the data because then we go from here we go into the data there will be this one here data and here we see a lot of information that we eventually need but of course this is not only one there's still more in here anyway what we need is the following i'm going to say your data and then dot four each then in here now i'm going to say your data points or data point then the index so you have this one and then here of course the functionality and within here we're going to start getting or extracting the specific information and what i really need here is the following i need to get here the data point or at least from the data point but let's do a console log first from this and it's going to command like this console.log save that refresh let's see if we can get or do we get do we have too many console logs you can see here i'm going to remove that one as well don't need all the excess data here give so many confusions save that refresh and look what we get we get all the information here and this here we basically get the x and y coordinates but there there's still more under the radar you can see your start angle and probably it shows you the every exact position here this is being calculated so this is a really complicated part because here this goes all automatically so it saves us a lot of time so that will mean the following here what i want to do here is just the data set let me take it dot to tip position and this information here if i save this let's see if it works all right you can see here now it does a lot of information and it creates here the exact coordinates and the location of specifically the tooltip just this two-tip carrot here meaning that this point here so what we're going to do is with this we can basically start drawing the lines with our starting point because the hardest part was to figure out the center point or the center of this segment here of every single segment now we get this information so we can play around with it so what i'm going to do here is the following i'm going to say a constant and this console i'm going to make a uh data for object destruction meaning i'm going to split them out i destruction i'm going to take them outside of this two-tier position so we can use them so this is the x and this is the y value and this x and y value will be equal to the data point through the positioning which is in other words these two here now i grab one of those and i can grab then the x or the y it will grab this this is quite nice information to have because now let's come on coming up that one up right here you can start drawing so what i want to do here is well let's try one of the things so i'm going to do here a uh let's do a fill style so i'm going to give you a black item or black color square let's make it feel still square so ctx field style and then i'll say your black and then what i want to do is ctx that reg style or right uh you know i guess that's a wreck style sorry that should be here in parentheses and then here we get the x and y values so basically it's the starting point x and y so i'm going to say x y which is the starting point in this one here is a starting point on the horizontal axis this is starting point on the vertical axis and then what i want to say how many pixels width and how many pixels wide and height so right now i'm just doing 10 pixels if i save this now nope let's see what's going on it gives us here ct like this uh all right correct style but this is fill style rex style all right uh let me check all right yeah i thought so i had something mistaken in here so this would not be wreck style no this should be the rack should be last and the fill is first so we're going to save this now refresh there we are now you can see here we're getting the positions nicely you can see here you might wonder why is this there well what is really focused on is the corner where it starts and that's the biggest concern i have and that one if i do only one by one you might notice as well and i'm not sure if you're able to see it it's very very minor i guess let's do this two by two to just see a little bit more clear all right so now you get it a bit more clear so this is the starting point or exactly the one by one is the starting point now we have in a nice loop so what i want to do here now is start to create a line from this starting point and going this line needs to be pointed outwards or one or the other way depending on where we are located so this is the more tricky part because we need to have a line here but if we are here we need a line that side not there or else we we miss it up so how are we going to do this well let's play around with this because now we're going to play with more advanced items first of all i want to make sure i always get the colors and the colors should be directly the border colors matching so if it's purple it should be dark purple color this should be the color here all right so to do this that's quite straightforward luckily because we already have here the index value so how can we do this we're going to say here the following we're going to data sets here that's because the data sets is basically this one here let's data point let's grab this and just only show you this one save that refresh unexpected 92 all right that one is of course not allowed because i need to have you at least this or else it gives an error all right so there you are so i want to get the data set in the line 89 and on line 89 we get this data set here then we can go here to border color the border color we can get here whatever color we want but i want to grab whatever the border color is here that should be matching with the line so i'm going to say here uh well basically it will be eventually here we get the data set dot border column and here this will be based on the index and the index is this one not that one and the reason why i'm going to grab this index here because this one only has one data set so that's index zero all the time this one here is the data itself whatever we grab very important here so if i would do this now and i would save this and let's make this 10 by 10 we would see now nice matching color coordinated items all right so enough proof about this you really you can imagine now what we need to do so what we're going to do now is basically the font we need to calculate basically our location well we have a location here now but we need to calculate now uh the the right item so let's see how do we do this well because we have to do here first of all we have the positioning here but just to be sure so what we're going to do now is just to be sure as well first of all this can be common on i want to focus on here to make sure that this color is always consistent so i'm going to put in here a ctx dot fill put in there and this one can be removed as well so where we're going to start now is to figure out first if we're going to draw the line we must understand uh here or here and how it will work so i guess what we can do here is to build a certain level of logic basically it's this we know the width of our item here and we also know the y-coordinate this which or sorry the x-coordinate so this would mean we could if we do a console log we could see if i do x here we could see here the exact coordinates here depending on which side you are all right and uh all right and that that one is not expected so we have to later check what's going on so you can just comment out this for now but what we really want to do is basically this one here we want to make sure that if we are in the center here or basically whatever the center is we can calculate the width of that by getting this one here and what i want to do is that if the one the x value would be below the center so if this center would be 400 all right so that would mean that the center oh sorry this is 400 in width center should be 200 so everything previously would be 200 so uh then it needs to point to the left but if it's beyond 200 it needs to always point the line to the right so that's what we're going to do right now and later on i i saw this black color here so we might need to fix that one as well anyway what we're going to do here first to draw the line i'm going to say this i'm going to say a draw line draw a line and this line should be based on wherever we are located so we'll say your const i'll say half and the half of the height would be equal to height divided by two now i'm talking about that because we have the height here so this one is important and the reason why is because if we are here up we want to make a line pointing up here but if we're here we don't want to point up and we want to point it more down so we'll be down line like that same here exactly the opposite direction so that means that there needs to be a comparison uh structure in here that we can see if we are where we are located so this will be half width should be equal to width divide by two all right so then what i want to do is the following we're going to say here basically let's start to draw something before we even continue on with the logic i want to just draw the line and then i'll say here ctx dot again path so we're going to say all right start drawing something and make a starting point the begin path will be where exactly ctx move to but move to might sound very confusing because you might say well this is a starting point and then he's moving here or the line is moving there no basically begin pass indicates there is no line the first dot is being drawn and the draw the the dot where it's going to be drawn will be on this coordinate here so where is this exactly well that's this one here basically there are x and y so the moment we have this what i want to do next is to create the line now we're going to create the official line we'll say ctx then line two so this is an official line so this is basically starting with the dot and here's the line and then you say here where are we going well for now i will just make it very simple i'm going to say here plus 15 comma y plus 15. so if i do this and then what i need to do here is probably give it a color so let's say ctx and i guess here we have this i can see a stroke and this is the stroke style and the stroke style is basically if you think about a stroke is a line you think we're we're working here with canvas canvas means a painting basically a blank canvas is like a white painting that is still not being painted on and we can start to draw on it so that's basically a blank sheet to start paint on and when you use a brush you make a line we call it a brush stroke so a line is basically a stroke with your brush so in here what we're going to do here is we're going to grab which color is where is it the area this is the fill style color that we grabbed that we made first already we prepared it in advance and then we're going to say here ctx dot now let's here we stroke so it will be drawn so once we did this here we can save this refresh and see what's going on as you can see here now we have our first line pointing down of course we don't want it yet because we want to do something more appropriate so what i want to do first to make it flat so like a straight line so for that i just want to say here we will not change anything on the y the y indicates the the height or up and down positioning or the vertical positioning and this here indicates your horizontal positioning so in this case right now just say here plus nothing else here if i do that let's see what happen now we get a straight line all right i don't want a straight line i want basically going up to the left or to the right sorry so going up then right and here down right then here left the left diagonal and to the left as you can see here and here this one might be maybe like that something like that so how are we going to play around with that well we have this here and this here can help us to calculate the position because we have here the width how do we calculate the width well the width here is 400 and the center is 200 so now you understand now you understand the logic so if everything is below 200 so this side we must always go to the left so let's play around with that so i'm going to create here now the if statement i want to say a constant and then i will say here the x line all right and the x line will be x value is a larger or equal to well the half width which is the 200 pixels so if it's larger or equal to 200 pixels if that is the case then i will say x plus 15 y plus 15 because this is horizontal level so if it's beyond this part plus 50 meaning that we need to go to the right side and then else if it is not then i say x minus 15 then we're going to the left side exactly the opposite direction so once we have this we can just grab this one and then here we will say here uh we can put in this one there so if i save this now refresh now you can see here it's starting to do something right and then what i want to do here of course i want to control the position as well you can see here maybe we could even extend it a little bit more in pixels but that's all right for now and then what i want to do is the following is the y line so we have here the y line and that will be exactly the same except not anymore on x value but on the height which is the y value so if everything is somewhere here this is probably the center i'm not 100 certain but you can see you imagine this somewhere here is the center so even if it's in the center or everything below the center should go point down everything above the center should point up because you can see here we get an issue here of course so what we're going to do here is the y line and then the y line equals y half height is y plus 15 and minus 15. so now i can do this you can see here oh of course it doesn't work yet why you didn't get here the y line assign it here save that refresh all right so now we have basically the first part here and now what we want to do is create a straight line or flat line afterwards so to do this what we need to do here is the next item so we're going to say here the following and let's see here in here we need to create a new line so we're going to say here ctx line 2 so this is another line and this line will go because this will be the starting point basically we'll grab it there and then it will just extend that line going where exactly well let's see here here basically i'm going to say here well let's say here plus 15. so if i save this now refresh now you can see we get a line here of course same issue depending here it's fine and this one is fine but i think here it's being clipped out so we're going to fix that later on but this one here is also going 15 to the right and of course i don't want that i want this to be of course based on my calculation here so just for this i'm just going to make a simple constant and i will call this the uh let's see here the extra line extra line and this line will be also based on x exactly identical is a half width and i guess we could probably fine-tune this more but that's all right if that is the case i say you're 15 and so if x is larger than the half width you want to have 15 and if x is smaller then we say minus 15. why so then here the largest plus 15 that's fine but here minus 15 because it's it's in the smaller half so we go down to the opposite direction to the left so then what i will say here plus extra line save that refresh and now we have our line here this one here let's quickly fix this i'm going down here in the options here i'm going to say hit layout and then i'm going to put in a padding padding and this padding will be let's say 20 pixels or 20 sorry comma save let's see that works that works better all right so you have to play that's the only tricky part you have to play because it's not 100 perfect we can make it more perfect but it requires a lot of deep calculations and logic because and i will avoid that for now this is just to create one here all right so we have this now here we're really almost done here what i want to do now of course is get the text so how do we grab here now the text so let's look at this we have here everything we have the line line what i want to do now is the text so how do we get the text now so to get the text we first need to figure out what will be the text and to get the text or what text we want to grab we need to probably get again here our data set let's save this here refresh over developer tab we can grab here this and i see wizard 96 let's remove 96 for now don't need that refresh there we are we click on this and then when we click on this we click here on the data and in the data we can probably find here the labels or no it's not even in here i realize and it should be in the data set am i grabbing the data set yes i grabbed the data set um all right so what we can do is slightly different because we are in the data set and the problem is it's not in the data set it is in the data it's charts.data.label all right so you can see here chart chart of data label and the data we're right now in the data set so we need to jump one up well just the simplest way for us to do is just to grab this here and then say here i'm going to do here with the console up here just say labels if i save that refresh there you are we got all these here so i'm going to copy this comment this up and then what i want to do here is first of all let's grab this here and then we say index and just to be sure do i get really the value or the text that i want save that refresh monday beautiful so now we grab here our value that we want so what i want to do here now is to measure the width of these and this one is slightly tricky as well because if you would have a lot of text here you have to see how that eventually position with each other sometimes will not be very uh well precision position that you need to move eventually the text more anyway i'll show you later on so what i'm going to grab here is first the width of this current label so i'm going to say your constant text width and the text with equals ctx.measure text and this measure text will grab the text that we have from here and we're going to say here once we did that and i did hear the eyes and i realized i don't want the eye and the realize i want the index why index looks through the iso is zero because there's only one data set but the index is always uh looped through multiple items this is the reason why it was only showing monday if i show you this here on index you will see what i mean if i save that refresh you can see here everyone alright those most important ones so maybe we'll get confused if you see the eye all right so we got this one here and i will say dot with what this really does is the following it will grab the text converted into a pixel amount and then we have here the pixel amount of the fonts or the text and this is important for us so if i save this you will see here now refresh the amount of pixels here all the text is approximately 20 to 16 to 20 15 to 20 pixels which is correct there's only three characters so it's about three four what is that five or six pixels per character that's fair enough all right what i want to do now is well we're going to put in the text so i'm going to say here very simple ctx dot font and i'm going to say equal to and then we can indicate later let's say 12 pixels ariel simple nothing fancy then the next thing is to eventually set the position here i'm going to control the position and this one is of course the most tricky one here i'm going to say here first of all let's do here uh let's add up the text here so i'm going to say here the following ctx dot fill text and then here the filler of the text will be based on this because this is the text remember that's the monday tuesday etc etc and then what i want to do here is a comma and then the position well the simplest way i would just say is x line comma and so that's x and y values so this x line and then i'm going to grab the y line and the reason i'm doing this is i just to figure out where are we now with the position now you can see here it shows something but of course we're not at the right place here this is not correct so we need to do here again it's like the if statement option and here you need to be more at this dot here so we're going to push that so the y line i guess is the y line plus extra would probably grab us there and if i save that refresh and this one works here that one does not work all right so it doesn't matter we're going to work on that because here we need to do exactly the opposite what we did here so what we need to do here next is first of all i want to position it to the center here on this what we call the baseline positioning so that's an easy one so i'm going to say here the following let's say ctx dot text and i'll say your base line and the baseline will be middle so it will be in the center because right now it's probably at the top so if you go more than down this will be the center point and i guess it didn't work apparently it does not work all right fair enough but then we're going to do here is to look at oh baseline maybe needs to be single l or a small l not with a capitalized l only b needs to be capitalized refresh there we are so now we're getting slightly better so this is beautiful and what we want to do next is basically figuring out here our extra line or at least this position that needs to be there and maybe we should have even these fonts in our nice color so i'm going to do that as well so we're going to say your font and then we have here text align and then where's the fill fill text all right fill text is here and i think we what we need is the following i'm going to grab that one here where is that fill style where are we stroke style this is stroke style all right so i don't want the stroke style here i want to fill up the text completely so i'm going to put it in here and i will say here fill style so if i save this now refresh there we are we get already the nice colors and now let's position them correctly let's push this onto the back so how do we do this well we need to get here basically the position and we know here how much is our text here so we can push that basically it starts here but we probably push that just there so how do we choose push that one let's see here uh let's see this will be slightly tricky so what we can do first i realized that should be one is the left or right positioning and what with that means you can start here this is a left or right so we have the baseline and the baseline was based on the y coordinates then we can put it top bottom center etc etc but you also have left right text align which is the x or the horizontal alignment and i guess that will be the best one to start with so i'm going to say here ctx and then we say here text align with capital a and here this text align let's see here if we do this one now on the right side what happens now if i save that then we have this all right oh i guess that will be very very easy for us so now all we have to do here is the following we're going to start moving this to the left or right so how do we calculate this one is again here i'm going to say here a constant this will be if statement constant and i will say here what we can say is the the text right i want to say text align but i cannot use the same term here that was a text position for the text x position equals let me say x if x is larger or equal to the half width which is this one of course remember if that is true in that case what i want to do here i want to say make sure there's a question mark that is true then i want to say this will be left if that is not true then i want to say text align will be right as i grab this put it in here save that in here and refresh you can see here we grab this one here and it's very narrow here i would like to put in maybe a pixel additional on that so if i would do that how would i be able to put in here maybe we can say here they have with measure text me what happens if i do here text width plus five i save that we get no it doesn't work at all all right so what we need to do then is basically at the very end here should we should have like five pixels as well let's see all right so basically there's a very easy way to do it and there's a bit more complicated way because what it really works on is on this one here so if i do here plus five you will see here refresh you can see we get five pixels here and we get here um well it goes more to the right so that means plus five if we are here and minus five here so all we can do is for this easy way as you can see here is just to expand that one or if you really are uh eager to easy i would say here just put a space here and a space at the very end here this would be the most easiest way because it will put a space between everywhere although i was expecting it to work here but i'll probably if you do this you will see this one will work there we are so that will be the easiest one but maybe you say well hold on this is not really professional and i agree with that so don't do that one then only if you are in a hurry timer or time constraint so what you're going to do here just simple i guess basically just simple here what i'm going to say here i would say always called plus 5 plus 5 px all right pixels so if that is the case in that case i would say here this is five and else it is minus five very straightforward so i'm going to say here and then again plus this so i save that now refresh we should see here now nicely this so what happened if we have this here if we maybe increase it to 15 pixels will this impact our design no as you can see here it works nicely of course it might impact if you would say here the layout if this layout goes away you have to recalculate everything as you can see here you might need to recalculate but of course this doesn't work and if you set this on true save then here same story then probably you need to have multiple structures all helping each other well in this case this is fine here and what is very nice here is this i'm going to show you that because i really like that one set this one false again save that refresh what is very nice is uh basically this wall works and oh so that was what i'm trying to say the movement i love the movement in here so it will really see it's a part of the entire uh donut chart so anyway so this is basically how and what you can do with it and if you like this or maybe you're even interested in more advanced items to make this even clickable that you can click this and go somewhere else or make a link out of it i have another video that shows you how to create a clickable pie and donut chart with links so when you click on a slice or your okay or in this case the donut ring we could then highlight or move to another page to another website etc etc

Channel: Chart JS

Views: 23,655

Keywords: how to create doughnut chart with labels outside with connecting line in chart js, create doughnut chart with labels outside with connecting line in chart js, labels outside with connecting line in chart js, chartjs, chart.js, chart js, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.6.1, chart js 3.6.1, chart.js 3.6.1

Id: YcRj52VovYQ

Length: 45min 10sec (2710 seconds)

Published: Sat Dec 04 2021