LEARN HOW TO USE ANGULAR CHARTS IN 2024 | ANGULAR HIGHCHARTS.

[Music] hello guys in today's video we are going to look at how we can draw these beautiful graphs here so the first graph here will be building this donut chart here and also we'll be building this line graph here so let's reload this page and see the animations that this graphs has and you can see they have a little bit of Animation so we'll be looking at how we can draw these gloves here and also we'll be starting from scratch you see here we have the um a blank application for angular and this is where we start we start from scratch and then we'll have something that look like this graphs here so without Much Ado if you haven't subscribed kindly subscribe and also like this video and also turn on the notification Bell so let's get into a tutorial [Music] so now we'll start from this blank application here and what we can do you can come here I have already opened the folder for this project here so you can navigate to source and then up and then you come here into app.modu.app.component.html and you can see here we have this default code here and this one is what we want to eliminate or to just cons are to delete everything inside here because this is what you can see here in this default page here so what we can do let's control a and then backspace and then when you save on this you will see that the page will be blank you can see here but I want to test it and test it I will just create a heading heading 1 here so let me create heading heading here and let's see if it will it will show us in this page so you can see we have this heading here so meaning it is working perfectly so now if you look at this chart here you see it is two it is two charge so what I will do first of all let me create a div so I will have a div here so this div I say I give it a class of this charts because we have two charts and then the first one here I will give it a pie chart it will be contained in here and also the other one here will be the line graph here so I just say dot line here so just like that so after that now I want us to go and look at how we can draw the graphs now so what I can do so let's go in here and look at how we can add graphs so to add graphs I would be using some module called angular highlights so what I'll say I just type angular highlights highlights I think I have already visited this website and you can see these uh Auto completion for us so just click this npm for angular height and now after this we can just check uh what we can see here so uh so you need to install this as you can see here so that's the first thing that you should do so you should navigate inside this project yeah so let me create and let me paste that code there and then what you need to do is to add these items it's not a must it's optional but you can add it so that as let us install those module or package so again you can look at how you can use this highlights so for example here you can see the usage and the usage is that the first thing that you should do is to import this chat module and then add import this check module and then you will add it in the module that you are using like for our case now because you don't have many modules we have only dot module.ts will import this inside it and let us import it you can see here so copy this one here and we look for app.modu.ts and then add it here so just like that and the other thing is to add it in the Imports so add charge module just like that you can see it it is added there so the other thing that we should add now is that let me see if it has already finished installing as see here so you can see it has already installed everything so the other thing that we should look is the usage let us continue looking at the usage of this module and let's see here now you can see here in their component the TS here you need to import this chart here and when you import now the other thing is that you need to create a new instance so let's copy this one here so in our component where we want to add the chart and our KCA it's up dot component.ts what you should do is that you should add that chart there and then what you should do now first thing we create a inside here let's add inside here so I can't see you at add okay this is up the component so inside here we need to add let's add a property that is so inside here I'll add a property first one I'll call it line chart and again we need to create Now new and then let's say new chart here that's some module and this module also will accept no options that we want to add so that we will add the type of graph that you want to add so another thing let's add for the pi chart here or donut chart and also we create a new uh instance of chart here so just like that so let me add that and also let me add an object here so inside here we should add options and I will show you here so like you can see here the type you can add this you can copy this and add inside the instance object here so you can see like this one you ready see is a line graph you can see it is a line and then the title will be added I think the title is something to do with this here like this one here these patients okay and then you can see other things that you can enable credits series now this inside this series is where we have the data and this graph will draw the line that has this here that this data here and will be called line one so in my case I had already added or I had already created the data for us to use so that we have something like that look like this one here so in our case here I had already had this data here so I just copy this one this one is for the line graph so copy it and now inside here we can copy this one this there and the other one we would copy it for the pie chart or the donut chart that is so come here copy or with all of this and then we replace it inside inside this here so let me add it here just like that you can see like this one here let me explain a little bit about this pie chart here you can see the type is pie chart the Spy that is meaning that it will draw a pie chart and here you can and see the type is line meaning that this is a line graph so you can see the text the title and then the text is patient and you can see this one is this patients here like this patient here so another thing that I want to show you is that you see the data that we are plotting here is the one that producing a line graph this line graph here so the other thing that we need to have is the name you can see the name patients are limited and the name patient admitted is is here like you can see it here so now you have understood that one and the other thing is here we have this chart and the type is pi that is that's why you can see this Pi here you can see this Pi another thing that you can look at is the these options here I don't think most of them even really matter so another thing that you can look at is this the text you can see here this is the diseases it is printed inside this circle here and the other thing is series and you can see here the data for the line graph here and the line for the pie chart is Detroit different like you can see the data for the line chart here is just an array of numbers and the one for the pie chart here you can see is a array of objects an object that contain a name that is the name of that Pi now the name of a piece of pie and the date and the data that is called Y and also the color you can change these colors you can see these colors here you can change them and to the way you want them to be so you can see these colors here they they are being they are being generated this color code here generates these colors here you can see them here so now the other thing that you should do in your usage let's look in a usage here the other thing that you should do is to bind the chart property so this chart property let's look at it so here I think they have included somewhere so even if they have not included what you should do is to bind the chart property so you can see now so this one here so they have not included but you can just go and look at this recipe Tories here so what you should do is that you should bind by these properties called chart so here I can say chart property I want to bind by chart property and you can see it is available but when maybe I remove this module here I don't import this module it won't be able to import that to add that or to bind that chat property here and you'll see why because it is telling us that that property can't bind to charge since it is a known property it's the unknown property of div and this is true because Dave and adamant of HTML don't have this property by default that you can bind it with so what you should do is that make sure you have imported this chart module here so let me go back and add that chat module there so inside here now I can bind to one of my charts so the first one that I I called it let's see here the first one I called it the mirror for the pie chart to the pie chart so I called it by chart you can see even it is Auto auto completing for us so the other one here we're also bind by charge and you can see we are binding by this div here so let me add this one and this one is line chart let me confirm it so you can see we have this line chart here and I will copy and paste to make our work easier so now let's add that you can see now we have these two charts here and by that the true chord if you check in your you know application here you can see we have these two graphs here but they are taking the whole wind and I wanted I want them to be in a horizontal Mana so what I can do now is just to go inside here and then copy this class here so that we can we can make them look horizontal so inside here so I just add this and in this idea I say display Flex first the first thing display flex and we can look at how they look now so if you look at them now you see you have this one here so I want to add another view and that is need to give them the flex of one so that they have the same length so you can see here we have a pi class and nine bar and Par and line here so what we can do we can add a DOT Pi yeah and this dot Pi you can give it a flex of one let's add Flex 1 and in here we can add another line Circle we called it line and we give it a flex of one here just like that so if you if you save on that and look at them you see we have that here it is already included here but it has changed and it's looking okay but you can see here if you look this one has a box Shadow yeah and this one also have work Shadow here so what I will do we look uh you can see this property so let's go in uh CSS here and I usually want to uh to use this one here and you can use this one too and make it your own default box shadow that you use so I look I find it very good and let's add now in here so in our pie chart we can add that box Shadow and in here now we can add that box Shadow so let's look at our graphs now photograph so you can see we have these graphs and because we don't have a margin in between them that's why you can see we have this we don't have a space here to separate them so what we can do now is first of all Let me give this margin and this margin we can give it a margin of 20 pixels just like that let's see how it will look so I want it to be here so it has you can see we have a margin now so if we have margin bit and now what we can do we need to add a margin now in between these two so in here I will just a margin imagine here and I give it a margin of 20 pixels and this one should be let's say pies on the on the left side so I'll give a margin of right here and let's see how now it will look like so it should have a margin here and it should separate them so you can see here we have this separation so we had added these graphs here one for the pi and one for the line here so you can see they look the same and now this is how you can add this line a line graph and the pie chart you can use any graph that you feel like like bar chart histogram you only need to learn more about this angular highlights eye charts and I found that this package is very easy to use and you can use it whenever you feel like you can use that in your angular application so another thing is that I will add a link to my to the source code of this application in my in the description of this video so that you'll be able to go through it if you hang uh if you don't get it and even you can just run it and use it somewhere so without uh you don't want to get this tutorial very long and I want to end this tutorial here so remember to subscribe like and turn on that notification Bell so that will be notified in the future when I upload a new video so have a great day and hope today you have enjoyed this video foreign [Music]

Channel: V8 TechWorks

Views: 22,862

Keywords:

Id: adbrUEJgA5k

Length: 17min 4sec (1024 seconds)

Published: Tue Jan 17 2023