ChartJS React Tutorial to Implement Different Types of Charts | Chart JS React Examples | ChartJS

hello guys welcome back this is amir and in this video we will be exploring charges library to see how we can integrate the charges and different type of charts in our website using dfgs chart.js comes with a lot of jaw types like the bar chart the vertical and then the horizontal then the strike floating and then the line chart and the bubble chart donut you can see and the pie chart some type of area charts as well so uh for integration of the charges in reactions we will be using react charges npm package this version two it has pretty much weekly downloads and this is the command to install the np package and it has a dependency of charges okay so let's get started and i have empty charges folder and let's initialize our sorry choosing jfj's npm npx create react app we can say that map and it will take some time all right so we have a boilerplate react.js app so cd into app and we will npm start all right so the boilerplate application okay so let's get rid of this one and see here welcome sorry welcome to chart yes demo all right so let's install the dependencies so this is the command and let's run it okay so entrance is all installed so let's import different charts from charges too so at the start point let's start from the bar chart and suppose uh there is a user who want to view the data from different stores and see the revenue against different months so let's develop that okay so import the bar and provide the data and in the data let's show the labels what we want to show on the x-axis so that will be an array of months so let's write jen feb march april may and june so let's try to show the data for these six months and for the data sets and the data will be an array of values against each month so suppose in chen the data is suppose 100 and in fab it is 200 300 400 500 600 right let's save it and let's refresh this here you go so we have data for january february march april may and june right now for jan it is not showing the bar because the the y axis is starting from the hundred so let's fix this one and for that we will be using the options and okay so let's fix this that we are showing both of these okay and on the y-axis so that will be in the scales and on the y-axis and for the the ticks there's a property called start from and that is begin begin at zero sorry two here you go it started from zero now it is showing data for the the bar for january okay so let's try some customizations right now it is showing a little color up the light gray color so let's change the color so that will be the background color suppose we want to show the red here you go the red color and let's suppose uh right now it is showing the undefined so [Music] as a the legend so let's add the label for that as well so we can see that it is a store one and save it here you go store one okay and actually we can customize each thing here and let's try to add what what what is on the x-axis and what is on the y-axis so axis is the months so we want to show the left x-axis and then the scale label and scale double string we can show say that it is we are showing the months and same thing we can add here as well on the y-axis and we can see that it is a revenue oh what's okay uh there's one property called display true but for this values i think false there you go once and revenue and also we can change its color as well so suppose we want to is the colors blue and here's also the color blue there you go and also we can increase this font size a little bit so the font size and suppose 12 and 20 this looks good also we can change other things as well like the font family font style there are a lot of customization available for each of the labels okay so also we can we can change the grid color as well so for that uh on the on both excesses and y axis so that is grid lines and the color suppose we want the color on there you go and let's add this color to the x-axis as well there you go both x's and y axes are not changed and also we can change the color the colors of these labels as well so that is the text and the font color suppose we want to see them green there you go and same we can edit in on the x-axis as well right okay so this was the data of the one store uh so we can add the data of multiple stores as well but before adding multiple stores let's uh shrink the width of this bar because it's it's too much too much too much wide so that is the bar thickness so 12 how much it is looks good here we go and on however it shows uh the data the store one it has the value of 100 and it's totally it has stored one on on in fab it has value of 200 right now it is not showing what this 200 mean so let's try to add a dollar sign before the the value so for that we will overwrite the tooltips options and in the tooltips there is callbacks and then there is a the label and it will be a function and it will give us the tooltip item and we will return a string and we can say that our dollar sign and then it will be value of tooltip dot value so let's run this refresh so we are showing a dollar 100 we can add revenue here as well revenue and maybe a column as well so revenue 100 okay so let's add few other stores data let's copy this data and change the values okay so we can see that it's store two and let's copy this two to three times there's four stores are enough one two and three and then four right so color red suppose we want this to be color green and this one should be orange and this one to be purple okay and let's change their values as well randomly so suppose it is this one i'm adding just random values okay i'm just changing the values sorry not too big value all right save it oh there's an error let's do one two three others extra comma here here as well and i think that's here you go store one two three and four i know in january the value of revenue for each store in in this month right now uh as i'm hovering over each line it's showing the rate of that particular line so if you want that as soon as we hover on the merge it shows the data for every store on over so for that we will change the tooltip mode and we will be using the index one so whenever we are on an index it shows the value for all of this all of the revenues against all of the stores so here you can see it is showing the value for all stores okay so that was the exploration of the bar chart and let's try to add some other charts like pie chart and toner charts and let's first import the pie chart and here after the bar chart is finished let's add pie chart and same we have to provide the data to it and let's copy the data from here okay so for the labels same and for the data set what is wrong okay so for e each of these months and suppose we have this strata and the background colors so on the pie chart we will we have to pro in instead of the single color we have to provide the colors for for each of the pie so let's reuse the existing colors the first one is red this sorry the second one green the third one is orange and then fourth one is purple so this is the data set of the of the first uh the stored one the store how the store one is behaving here you go so the values are less actually in january or chapter and we can choose maybe sean color for these two colors missing these two colors as you can use the sixth one like the blue there you go okay so and also uh if you want to see the data against any of uh the months suppose we want to see the data only for jan and february so we will disable all others so it will show the data for only only those months so same goes for the bar chart so here by tapping on it it disables the data for those only those months okay so let's enable it and this was the data for the store number one suppose and let's add data few of other stores okay so let's save it and refresh here you go actually the data is the same that is why it is not that much obvious how it is behaving let's change the data so refresh it as you go the first point the second the third you can see the store 1 store 2 and store 3. how it is behaving right and this was the pie chart so let's try the same data set for the donor chart as well okay so let's write a toner chart import it and then let's copy the same data and see how it look likes when it is represented only donor chart okay let's use the same data set here you go and you know hovering it shows the value as well but of course we can override that over these tooltips as we did for the the bar chart okay so that is the idea behind using different charts from the churches library so what we have to do is we have to import that particular chart suppose the bar chart pie chart or the the line chart area chart whatever we want to show we have to import it and add the tag of that particular chart and then provide the data and different properties and we have we can override different options against each chart type and we will custom we will be able to customize that chart type so that's it uh for the exploration of the charges library you know fbs so if you have any question please let me know in the comments below see you in the next video thank you

Channel: CodeWithAamir

Views: 4,568

Rating: 4.8867927 out of 5

Keywords: chartjs, reactjs, chartjs react, react chart js 2, chartjs 2, chart js react example, chart js with react, react chart 2, chart js for react, charts in react js, react chart js example, react chart example, react chartjs, chart js pie chart, chart js doughnut, chart js bar chart, chartjs multiple bar chart, chart js custom tooltip, customize charts, reactjs chartjs, different types of charts, different charts, chartjs styling, chart js legend style, javascript charts

Id: RA5KqJTDRXo

Length: 21min 29sec (1289 seconds)

Published: Wed Apr 14 2021