React charts using Recharts and React ChartJS 2

in this video you will learn how to implement react charts and actually we will use two different packages one with d3 and second with charge.js so you can see the difference between implementation [Music] so here i have two different libraries first of all richards which is using d3 underneath if you don't know what is d3 this is super popular standard of creating graphs inside javascript but not inside react and the next one is react chart js2 and this is a wrapper react wrapper around charges and charges is another super popular library inside javascript world to create graphs this is why in this video we will focus on creating the same graph by using these two libraries so you can see the differences between them so here i already generated create react app project and now we need to install this library so first of all here will be yarn add recharge and this is just a single package we don't need any additional dependencies for react charges we must install two packages first of all yarn add chart jazz and secondly react charge.js2 and actually it is an important difference it is actually means that this library react charges just a wrapper and it uses chart jasp which actually means we will have direct access to charge.js itself if we need to as you can see here is my app.js and we are importing here two different packages recharge example and charge as example and this adjusts to different components which are completely empty so first of all let's try to implement a graph by using recharge let's say that we want to compare popularity by years of three different frameworks angular react and view this is why here i prepared data from google trends and inside you can see this is array of objects where we have a name this is our year and also we have three different properties react angular and view and this is the popularity from 0 to 100 in this specific year and as you can see these are data for last 6 years and actually this is the format how recharge library want to get things and from my perspective this is a really nice format we have array of objects and we can directly read it we have here a name which is a key for our graph and we have all properties that we want to compare which actually means one single line one object is just one year for us now let's try to use it here and what we must write here is line chart and as you can see here i am importing it from recharge and here we must provide weights for example 600 and also height it can be for example 300 and inside we must provide data array which is exactly the data that we prepared this is the most important part i will save this and let's reload the page as you can see here we have some placeholder but we don't see anything because we have an empty line chart and we don't have anything inside and inside recharge they really made it wisely they split every single part inside our chart in a different component this is why here let's write a line and we must import this line from recharge and we can provide first of all a type inside and our type will be monotone as you can see i'm getting nice autocomplete because it supports typescript out of the box and here we can provide a data key and actually what is data key this is exactly what we need to render as you can see here we want to render three different lines it must be react line angular line and view line this is why here we can say exactly inside this data array what key we to render and here we're saying okay we want to render react key and here we can provide a stroke and stroke means the color that we want to use and here is our color let's close this line and save it now i can reload the page and as you can see here we have a nice line which actually means it is already working we have our chart and we have our line for react and now here i want to make it a little bit wider this is why we can provide stroke widths and inside we can set for example three as you can see after page reload it is much wider and we can read it better now we can copy paste this line twice because we want to change it and make a line for angular and we also want to make a line for view but here i want to write different colors for angular i want a red color this is it and here for view let's use this color so now we wrote three different lines inside our line chart let's check this out as you can see here is our graph with popularity we have three different lines for angular reactant view in different colors but this is not all we also want to see our grid this is why after our three lines and actually order is not important here we can just write cartesian grid and inside we want to provide also stroke this is a color and let's say this is a color cc now i will close cartesian grid and let's look on it as you can see now we have a nice grid where all our lines are located after this we want to render yes and as you can understand our years must be here on the bottom this is where here x axis and here data key will be named this is just a key inside our object let's save this and check this out as you can see now we have years on the bottom of our chart and don't forget i have auto import here on the top if you don't have it you must import every single property from recharge here on the top of the file now here we also want our epsilon axis and we don't need to provide anything inside because obviously it will be a value of every single key here let's reload the page as you can see we have our values from 0 to 100 after this we also want to add a tooltip and we must import this tooltip from recharge let's check this out now we can hover on every single year and see the values of every framework and last thing that i want to render here is a legend so we're importing our legend from recharge we don't need to provide anything inside and here we have rectangular view just at the bottom of our graph and with that being said we successfully implemented our first line chart inside richard's library and actually i really like this library because first of all we don't see anything from javascript we are really using react components so this is just plane components will get a nice autocomplete if we want to and here the whole markup is splitted in the different components they are crystal clear and they are not dependent on each other this is why i really like this library and also i want to say the documentation here inside api is really amazing for example you can jump here inside line chart and you are just checking how it works with a nice example and if for example you want to check the specific component let's say legend component you just click on it and you can see all properties of this specific component and how you can change them which actually means documentation is really awesome and this library is really nice now let's implement exactly the same but by using charge.js example and here on the top i want to put data in another format and as you can see this is really different format just for comparison here is recharge and actually i really like this format much more because this is just an array of objects but here it is different we have here our labels these are our years and now we are writing data and data is array of objects and inside we're providing our labels these are our years and then data sets and this is kind of the same this is just array of objects and every single one of them is just a representation of the line this is why here label is react and here is data and actually as you can see this data is just numbers like we had here inside the chart but here we wrote numbers for specific years and here we are writing every single here one by one inside this array just for react then here we're doing exactly the same with angular and then with view and as you can see here we can additionally inside every single set provide background color and border color and just for comparison here inside recharge on the bottom we provided it inside the line and from my perspective this is much better because here we're just writing styles or props for the component and here we're kind of mixing our data together with some backgrounds so this is our data let's use them now first of all here inside our example we must directly set widths and height for our wrapper and just to remind you here inside recharge we didn't do that we set widths and height as two properties inside our line chart we can't do that with charges what we need to do here we must write style and provide inside first of all our width it was 600 and here is height 300 and now inside we can write our component and it will be a line component and we must import it from react chart gs2 and inside our line component we want to give our options we will create them in a second and after this we're throwing inside our data this is exactly what we have here on the top as you can see these are our data we also used labels and we don't have any options yet this is why we must create options here on the top so let's set here options at least it is an empty array so now let's reload the page and check if it's working i'm reloading the page and we're getting an error category is not a registered scale and realistically from the perspective of the developer this is a bad design of the library because this server doesn't say anything to me and what i need to do i must jump inside this library i must go to the components and here i can open line and check how it works ok we're seeing here import line and here is line with options and data and this is exactly what we implemented now here we must jump inside line chart example and here we can see how it's done and as you can see here it is different so actually this is the same line options data just like we did and here are some configuration but most importantly here on the top you can see this we have here charges register and inside we're packing a lot of stuff and as you can see all this stuff were taken from charges and from my perspective this is bad because they didn't isolate it inside library itself this is why we must know first of all how charges is working this is obviously not bad but this is not a beginner knowledge when you just want to pick a library and secondly you need always to write this register and actually we can directly copy paste these lines because we need all this stuff we want here title legend tooltip and so on this is why here on the top we must register it and here i will copy paste the import also from charges so here on the top first of all we are importing lots of stuff from charges we are just importing line from the wrapper react charges and here with register now let's check if it's working i will reload the page again and now yes it is working and we see the whole full-blown graph and actually why it is working like this because what we provided here was just line with options and data but what we did here on the top we registered everything that we need here which actually means if we are registering here tooltip then we will get here tooltip and we have this tooltip when we are hovering for example on this point which actually means if we will remove here tooltip then we won't get it here this is not very obvious and is not good architecture in comparison to recharge for example because here we are rendering everything that we need inside line chart and this is crystal clear this is just a component here it is not that clear for me but obviously you are just registering what you need for example you want here a grid then you need points that you need line title tooltip and legend which means it is totally possible but i just don't like it as you can see these two graphs are really similar but the one tune that i want to do i want to put this legend here on the bottom just like we did on the first graph how we can do that we need to provide here some options and inside our options we can write plugins and as you can see i don't have any autocomplete out of the box this is not that good for you as a developer and inside we must configure legend and inside legend we have our position which is bottom in this case it will work properly as you can see now on the graph we have our legend on the bottom so having a nice autocomplete of the typescript would be really nice for this library and also i want to say something regarding documentation from my perspective this is not that great what we have here we have just components we can jump to the single line for example and see some props this is not that bad but this is not that useful they don't have something like api but inside you can just jump and see everything for example in the examples inside line chart we can see this linear scale point element line element and so on but we don't see them inside components and obviously i understand this is not a part of react charge js this is a part of charges and actually we must jump directly in the website of charge.js and look for them there but it means that you must not only learn the wrapper itself but also additionally the charges and i'm not saying that this is bad approach but this is more advanced approach and not that beginner friendly and actually if you're interested to learn how to implement lazy loading inside react make sure to check this video also you

Channel: Monsterlessons Academy

Views: 22,716

Keywords: react charts, recharts, react chartjs 2

Id: Gj0ZOr0N6Ck

Length: 14min 48sec (888 seconds)

Published: Tue Aug 16 2022