How to create charts in react in telugu | chart.js in react.js

[Music] law i had spent seventeen thousand and i see uh visual we can able to uh view on it we can also present return okay so you participate outside guys i know it's so let me come to that so you could use that and if we have an official website for charges so you could just charges nothing starts yes okay so coming to developing different type of uh you know charts so you could do certain under component slow monica different type of charts also okay so uh miku first thing intended guys in fact uh explanation i mean he bar started someone's chassis uh we will try to develop the same bar chart similar to this okay so you probably want any application random application download challenge application instructions application create json at the same time npm install uh charges react right uh react charges uh it packages and install json on network okay so they already installed the same application and you know uh visual studio code local open json and network so you know already server and go to start yes i know hope you can able to see it is running under 3001 portal network okay so let's start creating a bar chart okay so a bar chart great challenge i'm just trying to remove all those stuff here so firstly he names about a day i'm just going to import bar component from react chase i mean react charges okay so i'm just trying to import bar one bar uh related um and this is my main component okay so e component and exposure both nano network so usually you can just i'm just going to written and then simple due tag along with the um bar chart okay bar component okay secret user and this bar component will take an um data in terms of props props along on a data change has summoned to a bar component so before that let me export it okay expo default app see bar charting one of their tenants based on that data okay so data create challenge i'm just creating a data with the variable name called data so in the length and day we're going to have like two different data one is x axis data another thing is y axis data so x axis means from uh chant to december so this is all in terms of an array and network category scaling category scale and dom okay and uh y-axis so economic data just contaminated so this is belonging to 2020 data sets this is belonging to 2021 dataset and see two different type of data systems contaminated dataset content okay okay we can able to store or two different taxes first x axis that's belonging to labels okay so a label saying guys this is like just some from john to december and now here what we're going to do we're going to create an um y-axis so y-axis someone is in data and that's all the data sets okay so we could have data sets coda we're going to store in an object of datasets okay same thing and if we're going to track 2020 work object low okay so here first thing we're going to label it again so when we allow label just some under let's label this let's label as 20 20 expense okay and then what about the data okay now so we have we just need to store it as data set so your data set up we're going to store it as an array of data okay and we're gonna use like in background color okay background color so the background color for 2020 expense i'm just providing as pink okay so similar way i'm gonna to create it for 2021 okay now so 2021 387 copy and paste just underneath let's see to intend to label someone internationally copy and paste shape on a network okay so here we have data sodini and just replace this course so this is belonging to label and this is belonging to 2020 expense just some dummy data on it guys okay now um we should replace here and this is 2021 data all right super just move to the console [Music] x axis is belonging to category scaling and y axis is belonging to it doesn't take more time on it can i i'm just going to import chart and okay chart and then linear scale okay linear and category scale me that's a category category scale so we move to components at the definite account alley at the same time we should also import bar element since we are using bar chart each element slow we should use all these elements on that okay that's pretty simple so let's save it hope monica error rather than pulling let's see let me refresh now now the category issue is resolved guys but bars populate out level so barcelona data populate about and then here oh okay so you could have just data not today that's it i'm sorry guys okay so again you can ping it let's change [Music] it is belonging to which type of uh data a year and a month [Music] so those are belonging to options on that additional plugins so additional plugins create sharing we didn't have an alternative option so let's create an options uh variable okay so options equal to uh we should create a plugin okay plugins so e plugins slow first thing and then day we should try to have an um um the title under okay so when we put a title create challenge we can directly have uh object name property called title so each title low we can provide the title name okay in the format of text okay so according today i'm going to provide like expense tracker okay and title code it should be a display as true manageable and a mandate trigger display alcovety we should mark it as displays to one chapal net okay and also uh you tighten under the top line of the so we should introduce new property that's in legend so legend law will have we will be fixing the position on nato camera so it will take an uh property called position so position we will make it as stop okay so on legend you should um and then title you should sound so these are also belonging to uh some elements containing it will work okay otherwise it doesn't uh uh work under so first thing is legend and uh title and one more thing is um tool tip okay so a tool tip and an indication so first name options and available creatures that we doesn't pass for the bar okay it will uh recognize it as options data okay now let's see see we choose we got our expense tracker title which is but when you hover on the each bar it doesn't show any data network so then it reasonably we should uh register tooltip.net okay so that's the component called tool tip excuse me so a tooltip we should also register in purchase code master maker contact we should also register in the chat say producer and day let me try to refresh now and now we can see the actual um you know hover running on the data so the uh host is not we can able to see what is the data or what is the actual expense we spend on this month already and easy to turn out in the network so it's like simple uh uh bar chart guys it could be top but will be right to charon condi it will uh move the data to the right okay now so they're gonna make oxygen should be significantly surrounded it shows the data in right side and network so if you want to have at the top you can also have it as the top okay so in the low uh making that one guys instead of registering all this stuff required things may automatically use this query okay so import um that's an uh chart okay chart from charges okay not from react charges charges slash auto so when you do the same money again and that too someone uses the pretty elements and they could automatically start okay so then someone's in documentation include a mixture so if you have time you can also check it out the same okay all right guys one of our key uh [Music] i want to have like height as 400 pixel and if we didn't want to provide any fixed flow here since one of inline studying is just number to react low and with us eight hundred and let's make margin as adults operating market center loss in the data okay and in fact this margin also should wrap with single quotes okay and let's make it as not oh let's save this secret user and then so data will be presented in the format of center and as for the height and width it is replicating properly okay so you could come on [Music] [Music] like and subscribe guys um it will be more helpful for me and thank you so much have a great day

Channel: Telugu Skillhub

Views: 8,034

Keywords: Chart js in react js in telugu, chart.js in react.js, chart js in react, chart js in react in telugu, how to use chart js in react, how to create charts in react, how to create charts in react in telugu, how to generate charts in react, charts in react, how to create bar charts in react, how to create pie charts in react, react with chart js, chart js with react, using chart.js in react.js, chart.js in telugu, integrating chart.js in react.js, react-chartjs-2, react-chartjs

Id: iJ4iMXtWpkk

Length: 17min 45sec (1065 seconds)

Published: Mon Jul 04 2022