hello there in this video i'm going to be showing you how to create this uh line chart in swelt uh using a chart like record a chart.js now charges is a little bit tricky to use with swelt so i'm going to go over the installation and how you can customize it so this is the chart that we're going to be building and as you can see you know it's got this sort of a transparent uh color and it's got this sort of thick orange line and it's got these uh points that when you hover a room they enlarge and you get a tool tip as well and there's a little bit of animation going on as well so uh and it's also responsive so uh if i resize the window i can just uh show you it's responsive okay so so charge yes if i go to the charges document site uh you can get all the information about installation and uh the different chart types that we have uh we've got line chart by chart so we're going to be concentrating on the line chart and uh yeah and it's got some configuration details there and uh and for go down uh it's got these attributes that you can i use to customize it to your needs so it's got quite a lot of customization features there so you can uh refer to these as you need them and you know after you've gone through this video okay so and uh the thing about uh uh charges if i click on the get getting started part there and there's some insta in integration bits that you have to consider so that it tells you all there uh so what we're interested in interested in is the uh bundlers and we're using a rock roll up so it gives you some information there so these are things that i'm going to be covering in this video okay so uh and if you like these type of videos uh please subscribe to my channel and let's get started so first of all let's open up a command prompt in the directory that i want to install my project then i type in npx digit swelt js slash template space demo chart so demo chart is going to be the directory that i'm going to import my project in so once that's finished a cd into demo chart then i run npm install and that should install everything so what then i'm ready to open up uh my code in vs code so just type in code space dot so once you set up uh your app using npx digit command uh you should when you go into vs code you should see all the folders and files set up there now if i go into the source directory uh you have your main.js and your app dots well so the main.js is your sort of bootstrapping file that loads in app does well and so if we're going to the app as well and this is the so this is where we're going to be writing our code so to to run this uh you can go to terminal new terminal and do npm run dev okay and this should run it in a browser so as you can see yeah it's uh it's got you it's running on localhost 500 so oh control click that and that should open it up in the browser so it's a hello world so now we got all that running okay uh what we need to do is uh what i'm going to do is i'm going to just close that for a second okay i'm going to go to the browser and i'm going to go to the chart.js document page so i'm in the chart.js doc site which is chartiers.org docs and on the left hand side i've got charges getting started in general so if i click on getting started i got uh going to usage and that tells you how to use charges so i've got so creating a chart uh you need a canvas element on your markup and with an id and then in your javascript you get hold of the dom object of that canvas so like they're doing here so you're saying bar ctx equals don't get element uh by id of my chart okay so that in example they call it my chart okay so if i go further down they've got an example called here uh that demonstrates this so um so what it's doing is you know you've got the markup there and in the script part you've got the variable that captures the object of that canvas element and then you have a line saying my chart equals new chart so that's the key thing there and that's how you create the chart okay so with it uh within that uh chart component your uh it has two parameters here as the the first parameter is the uh the id of well the the dom object that you know in this case is the ctx variable and then in the second parameter it's the configuration for your chart so that's what it's and that's what it's uh demonstrating here okay so uh because this this uh code is in the format of the markup and script that you can use so we can copies uh this straight into our app.swelt uh script okay so i i can just highlight this go down highlight the whole script and then do a right click copy or you can do or there's a button there to copy okay so and i go into my vs code and i'm going to delete i'm in the app as well so i'm going to delete what's there already so it's just blank then i'm going to paste this new piece of code in okay so now uh so i've got the canvas element at the top okay so in the script part okay uh we're gonna do a lot of modifications this won't work as it is now so we need to make some modifications so the next thing that we need to do is we need to get access to the dom object for the canvas so in swelt we need to do a binding so in the canvas element uh i type in bind colon and then say this equals to open close curly brackets and i'm going to say ctx now uh as you recall uh in the uh the code that we copied over we had a line saying ctx equal to uh document get element so so that's why we're calling it ctx so we're going to bind it to the cta so at the top i'm just going to say let ctx sorry x space ctx okay so uh so we so we can just delete that line okay so now what we need to do is we need to make sure that this piece of code runs after uh this dom this canvas element has been rendered so aims well we're gonna be using uh on mount so i'm gonna do import on mount uh color brackets on mount from as well okay so uh so then we need to create the function one mount and and and this function is gonna have an sync codec okay and this it's going to be an arrow function um brackets so we're going to be pasting that code here so i'm just going to copy all of that copy and delete from there so i'm going to paste it inside here so now that we've set up our code uh we haven't installed a charger yes yet so so i'm going to go back to the i try this site okay at the document site and there is some other things that we need to consider okay so uh to install it uh we run npm install chart js okay now there's also some integration things that we need to consider because this is for uh installing on uh you know vanilla js so we need to integrate it with a swell so there is an integration uh section there uh on the left-hand side and that tells you how to integrate with uh different uh build tools okay so in swelt uh we we using uh bundlers as a like a roller okay so what we need to do so in this section it tells you how to import the components for your chart and use it so there's an import section and then there's a a way to register it as well so when you're building a chart uh you can access all these uh different components so uh when you're building it from scratch you know you need to know which components that you need to use for us we don't really know which components we're going to use because we just sort of copying and pasting the code so in order to do that you can either you know copy or this uh to import and register it and then use it like so uh you know in my chart equals a new chart and you put it into that function my child function okay so you can do that way or you can uh do a do it in the in this method that you suggest here you know short registration format is also available so uh we can copy and paste that in there or there's another third way which is sort of one liner uh to uh to import the chart yes so so what we need to do is we're going to run npm install and we're going to copy uh copy and paste that in there so i'm going to kind of copy this into a code okay i'm going to copy just under the input format okay and hold on it's a i'll save that and i go to terminal and i say new terminal and i'm going to say npm install and it's a chart dot js okay okay so it's installed uh now i'm gonna go to the browser and check if it's running okay there you go okay so the chart is showing up now so it's just a little bit big so i go back and then go to the app dot swelt okay so okay so i need to go to the canvas element and i just reduced the height to 200 okay save that okay so now it's uh it's more sort of a reasonable size okay i can i can reduce it a bit more to 100 okay so so that that so we got a basic bar chart up and running but we need a line chart uh so and we also need to clean up the script a little bit more so i'm going to go back to the script and then i'm going to change the type to a line okay and save that and go back into the browser okay do a refresh refresh again okay so now we've got a line chart okay so so that's all you need to do because we uh imported with chart dot js with a slash auto it's loaded all the different types of charts already otherwise you'll have to manually import the modules and regis register them so that that's what we went over earlier okay so also what we need to do is we're gonna simplify these background colors and border colors now these were specific to each bar bar in the bar chart so so we we're just going to have one color for the line that's it and we don't uh and these are going to be the color for the dots so we're going to have one color for the dots and one color or the for the line okay so um i'm gonna just copy one of the colors and then and delete this array okay the array of colors and i'm just gonna paste that color in there okay and i'm going to do the same for the border color so the border color is going to be the line color so i'm going to just copy one of the colors and then delete the whole array carefully right so hook up that color there right now save that go to the browser okay so so now it's got one color and it's got the same color for the dots as well uh so forgot back now uh we can also take out the data and the label that uh you know feeding as a separate variable so i can just uh cut that out and say chart data and at the top we say let chart data equals okay and we can also do the same for the label so i just cut out the labels from there so labels and then at the top i say let labels equal so i'm just doing that so i can simplify the chart settings and i can you know you can feed in your data from outside uh of that uh function so you can uh you know get in the sync a fetch or something like that okay so so i've simplified that all right and and let's do and i'm going to save that and let's look okay so it's still loading okay so that's okay okay now we're gonna target the dots so we're gonna make the dots a little bit bigger and also we're gonna uh give the line uh some curvature so let's do that first okay so to give it a curvature so i'll go to the data sets and after the border width let me just put a comma there and and give it a um as we call tension and the tension is going to be 0.3 okay so the tension is the the curvature of the line so if i say save that oops so now you can see it there's a curvature to it okay so go back and now i can give it a thickness as well so to give it some thickness uh so we go to the settings and uh after the tension uh we're gonna say comma and we're gonna say border widths okay and border width of let's just say five so oops okay so i save that and go back okay so now it's thicker right now we can do the dots okay so we can uh let's just say we want to give it a radius so [Music] five okay so you save that so the dots have become bigger now all right okay so now we're going back and we can also on hover we can give it a another another setting uh you know make it a different size so we can say uh i think it's a point over the sixth point of our radius uh so we can give that uh let's just say eight right so if i save that and go back so if i hover over it so it's it's enlarged but it's got this color which is uh so we can fix the color now so it becomes bigger so if we go back right so we need to set the color for this now uh so point so we can get that through point uh uh background color okay so i'll just say a uh blue say that okay okay so that's so we can make that radius a little bit bigger so if we go back and i can make that as well so let's just see what that okay so you can play around with this and fine tune it that way okay so i'll go back and now that was all uh that was the settings for the particular data set uh the everything associated with with the line and the values okay so if we go to the chart again okay so so everything to do with the line and the dots will be under the data set okay so but if we want to target the grid okay so the everything outside that like the gridlines then it's it's under the options okay so anything um styling outside of that uh our data set we're going to go into the options so what we can do here is i'm going to set the x scale and i'm going to target the grid line so to target the grid lines i i'm going to delete that i'm going to say grid and under grid i'm going to have an object and in that object i'm going to say display and it's going to be false okay so what i'm doing here is i'm going to get rid of the at the grid line for the x-axis okay so so there you go so so you only get the the vertical um grid line that goes from the y-axis okay so that's that's how you target uh that that area of the chart okay to wrap things up we're gonna give the line chart a fill color so to do that first we need to set the fill attribute to true otherwise they it doesn't allow you to do it okay so i set it fill to true and i say background color and i'll set it to say an orange okay so and i save that and go back so hold on a minute let me just make sure i've done it right as well to run orange oops orange okay so save that okay so quite an orange color now uh we can make it transparent if i if i just right click inspect this color i don't know i'll just i just get any color okay and i can just uh select an orange color and uh set the transparency okay so i'm just using the inspector to pick a color i'm not doing anything so that's so i can just copy that color so all i'm doing here is i'm just selecting a color and setting the transparency so again rgba color so i've copied that i just go into my code and i just paste it there okay so i i use the debugger to select a transparency color so but save that and go back in all right now i've got a sort of transparency there uh to the orange color so i can set it to even say 40 or 30 okay see so it gives you a more transparent color then so so that that makes it look much better so that's how you uh set the color for the launcher and that wraps up the tutorial so hope you enjoyed it and please subscribe to my channel if you want more tutorials like this