Beautiful Area Charts in React with Recharts

hello how's it going it's lee halliday and today we are going to be using recharts to try to build a chart that resembles this one from the exodus desktop crypto wallet i really like the way this chart looks both the color scheme and the way the tooltip works as you hover over so we're going to try to resemble our area chart as closely as we can to this one and if you haven't already please subscribe i come out with react javascript node videos every week hit the like button all of that good stuff the bell to get notified so let's get started trying to recreate this chart now i have no clue what library they used to build this one but area charts is one i've worked with or sorry recharts is one i've worked with a few times before and i was able to come up with something that looks fairly similar not identical but pretty close now the first thing is that anytime you're charting you need data and unfortunately i don't know of an api that gives me sort of the daily cardano price like i'm showing in this wallet so we're just going to invent some data it doesn't have to be perfect so we're going to use the good old 4 which i haven't used in a while but it still works well so we'll just say num is equal to 30 and then num is greater than or equal to zero with num minus minus so why this we're basically going to start 30 days back and then step up until we get to zero days back which is today's date and so for each one of these iterations we are going to be pushing some data onto this data array so we want the date which we'll fill in in a sec and a value so value i'm just going to randomize it we're going to say one plus math.random and that will sort of give us basically one exactly um plus random's between zero and one so it's going to sort of fluctuate between one and two and for our date what we're going to do is basically use the sub days function from date fns to use this 30 days back 29 days back to give us a date to work with so the first dumb parameter they need here is a date so we're just going to say new date and then we'll pass in the number of days back so this would just be that so this gives this gives us a date which we're going to convert into a string and then we'll take that string and we will substring off the first part of it but i'll just show you what it looks like first so if i save this go to the browser this is what we get basically the past 30 days it's sort of hard to read right now so why don't we just make the color white for a sec here we go so what i've got is 2021 february 12 and then the time i don't need the time so i'm just going to substring the first 10 characters here so let's go back here and say substring from 0 to 10 and now we have a string that gives us just the date and then you can see here the the value so 1.87 1.65 so that gives us all the numbers down and it steps up to today's date which i think yeah it's the 14th so that appears to be working but we're obviously not going to be showing the data here like a pre so the first thing we're going to work with is something called the responsive container so in recharge this allows you to not have to define a fixed height and width for your chart you still have to define one number that's fixed but we're going to say it's got a width of 100 and then we'll fix the height to be 400 pixels so inside of the responsive container is where we're going to put the area chart so we'll say area chart like this everything else will go inside and the only thing we need to pass to this is just the data that we've created so just like that so if we come and look at our chart we've got nothing right now and the cool thing and sort of why i like recharts is basically they come in all these like little components so you add the x-axis component the y-axis component the actual area part of the area chart i like how they split up sort of adding different pieces of functionality using react components it feels very reactive even though underneath i believe they're using d3 which is manipulating dom and html and whatnot but it takes care of all of that for you so why don't we add the area just like this and we need to tell it sort of how to access the data that we've given to its parent the area chart and so we need to pass in the key and here we're going to be basically mapping the value just like that so if we come back here we have an area chart it's working it doesn't look exactly the same yet as the exodus one this one looks a lot cooler but we're going to be working our way towards that so next up why don't we add in the x-axis and the y-axis so we'll do the x first x-axis and we need to also tell it what our data key is so x is along the bottom so that would be the value that we're showing here oh no that's wrong this would be each date so each each day is what's represented here so we'll pass in the date come back and now we have the beautiful each date along the bottom here it's not formatted the same as in exodus yet we're feb 28 but we're going to get there eventually so now let's add in the y-axis here to the left side of the chart so we'll go back and we'll say the y-axis and the data key for that is the value there we go so now we have the x the y axis here 0.5 1 and then up to 2 at the top so it's starting to look better that tool tip that shows up that like everything else in recharge is a component so we're going to come down here and we're going to say tooltip and literally all you have to do is that and you start to get a tool tip where in our case we're getting the value showing up now i think that change to css is messing with things a little bit so i'm going to go back there so now we can see the date showing up sort of on each one of these we can see what date and what value and we can totally customize everything about this tool tip but we'll get there in a second let's just get the functionality working first next if you look at the exodus one they've got all these really nice lines that's what recharge calls a cartesian grid so we'll go here and that's the last component we're going to be using so we'll we'll come here and we'll add the cartesian grid just like that come back and there we go so that added the grid here it's really strong and really like squary so we're gonna fix all of that but essentially we have all the pieces in place and now we can just start to customize everything about the way this looks to get it to look identical or at least close to the one from exodus so why don't we just sort of start um i'll put spacing between these boom so it's a little bit nicer and we're just going to start customizing each one so the first thing you can customize on the area is the color of the stroke and the stroke is basically the top line here in the area chart so we're going to use the color it's number 24 5 1 b7 so how did i get that number i used this little tool color slurp to basically try to get that color that shows up here and it's hard to see right now but the top line of this is now that color so with the stroke filled out we are now going to fill in the gradient part of this area chart and if you look at theirs it's got this nice fade from sort of sort of a bit more solid down here to fading out at the bottom so the way we're going to do that is by actually just defining depths and i believe this is defining something that normally sits inside of an svg and because recharts i is i think just working with svgs that's why this works so inside of our defs we are going to be building a linear gradient just like this and our linear gradient we need to give it an id so that we can reference that when we're telling the area sort of which gradient to use so we'll just give it an idea of color and then we need to define just some x and y values for our gradient to work so we're going to say x of x 1 of 0 a y 1 of 0 and then an x2 of 0 and a y2 of 1. and i'm not entirely sure what those four values do but when i looked at all the examples it had them so why don't i'll get it working and then we'll remove them and just see what it does but inside of the linear gradient we have to define stops so each stop sort of represents a part of the gradient and as it's transitioning sort of from this stop to this stop what color and opacity should that stop have and at what point should it stop so we are going to say the first one is an offset of zero percent and its stop color is going to be the same as we had down there so we'll just paste that and we're going to give it a stop opacity of 0.4 and this will be self-closing just like that so i'm going to copy it and paste it down here and this one will go to 75 and we're basically just going to be playing with the opacity so we'll say 0.05 so it's almost you can't see it when it gets to this point so with our linear gradient defined here in the defs part we can come down to the area chart again and we can say go fill the color the what's the fill of this svg portion and we're going to say it's a url that points to the color um the one linear gradient we just defined up here so if we save this come back we're starting to get that fade and it's starting to resemble more of the exodus chart from top to bottom so next thing i want to do is i'm finding this cartesian grid really distracting so we're going to play with it a little bit so we can go down to our cartesian grid and we can say i'm going to give you an opacity of 0.1 so that you're a little less intense so it's already looking pretty decent but exodus doesn't have the vertical lines here so we can actually just get rid of those by saying that we want vertical to be false so you can turn on and off the vertical or the horizontal and if we go to the browser it's now sort of looking exactly like the lines that they have in the exodus one so next i'm going to sort of work on this um what's this one this is the y axis and what we're going to do here if we go down to the y-axis so i'm going to say axis line is false and the axis line is the line that runs sort of right here between the axis and the chart so we're going to turn it off completely and then i want to turn off these little lines as well so those are called the tick line so tick line is going to be false as well and we can also control how many ticks it should have so we can say we want to have eight ticks so that added a few more ticks here than we had before sort of up to you how many you think look good you could say six or whatever you want and the next thing i want to do is format this right now it just says 2.1 1.8 0.3 but if you look in the exodus one it has a dollar sign with like a formatted number here so we're going to format that a little bit better and we can do that by passing in an arrow function that will format the value so we'll that'll be the tick formatter it's going to be a function that receives the number and what we can do is return back a dollar sign and then embed in the number that we're going to turn to fixed to two decimal places just like that so we go back to the web we now have this formatting two dollars and ten cents a dollar eighty a dollar fifty et cetera okay so why don't we turn our attention now to the bottom here where we've got the date and if you look at theirs what they do is basically they have every seven days showing up so they have the the 7th the 14th the 21st the 28th so we need to both sort of avoid showing any date that's not divisible by seven and we need to also format it so it just says feb 21. so we'll go back to the code we'll go to our x-axis and we're going to say access line is false again tick line oops ticket tick line is also false so that gets rid of all those lines there and then we can come to our code and we'll do the tick formatter again so this is going to take in a string representation of the date so i know it's a string because when i created the data here i converted it to a string and then substringed out the fir just the date part of that so we're going to come down here to our formatter and you can do this in line or put it in a function wherever you want but the first thing i need to do is basically take it from a string into an actual date object so we'll say date and we're going to use a function from date fns that's parse iso so parse iso and we want to parse the string representation of the date so now what we can do is basically try to check if it's the 7th 14th 21 28th date so for that we're going to say date.getdate which gives us the day of the month and we can use modulo 7 check if it's equal to zero so if that's the case we know that it's one of those divisible by seven dates so then we can return a formatted version of that of the date and we can pass in what format we want so the one we're going to use here is mmm which is the month like feb or mar and then d for a date uh just the day of the month that doesn't have the zero in front of it but then we're going to come down here and we're just going to handle for all of the other days of the month we're going to return an empty string so when we do that what we get is something that resembles sort of exactly what they have feb 14 21 28 march 7 14th looks like i'm showing a little bit more days than they are but it's the same idea so i think last what we have to do is to format this tooltip and what you can actually do here so if we go down to tool tip you can actually pass in an entire component and you can put whatever the heck you want inside of it so we're going to say content and we are going to create a custom tool tip just like that so we'll come down here below and we'll say function custom tool tip so what they're going to pass to us are basically three props so those props are whether it's active because at any point there's sort of only one active and there's 29 others that are inactive they also give us the payload sort of what data is being hovered over and what's the label of that payload label being basically the x value whatever's along the bottom which in our case is a is a date that's a string okay so now inside of here we can basically return html that we want to show up so i'm going to say if we're on the active one we're going to return some a div with something in it else down here at the bottom we're going to return null because we don't want anything being displayed only the active one and i'm going to give this a class name of tooltip and so why am i doing that i did set up a little bit of css ahead of time that adds border radius background color color padding shadow stuff like that so that should make it look somewhat similar to their version of it okay so inside of this div what we're going to do is basically show an h4 and this will be showing the the label or what date it is and the date the label that comes if we were to just embed it in here let me just refresh what did i do wrong oh that is what i did wrong i have to return something there we go so this is that same string representation of the date it's the same one that we included in the original data up here that we generated so we need to come and use data fns to basically parse it again parse iso the label which is the date and then we're going to format that and the format we want here is going to be triple e to start with and triple e gives you the the full day i don't know how they came up with e but that's what it is so we're going to do comma to be the day and then that month again the triple m so now we're getting tuesday to march and then we'll do comma again and we'll just put the year so that gives us the same one that they have tuesday three mar 2021 wednesday three mar 2021 cool so below that we are going to put a p and inside of the p we are going to basically put the dollar amount so if we were to just actually jason.stringify the value of the payload we'll do null 2. um no that's the one i'm that's the fin okay so what it is is basically it's actually an array and why it's an array is because you can have multiple areas within an area chart maybe you're graphing multiple different values and you're sort of comparing them we only have one but it still comes to us as an array and inside of that array you have something called the value so that's what we want to get access to so we are going to go to our code and we are going to say that we want the payload the first one and we want its value keep going to the wrong one so that's 1.6207 cetera so we just wanna format that a little bit we're gonna put a dollar sign ahead of that we're gonna put cad currency after that and we're going to say two fixed with two decimal places to basically format that correctly so there we go 1.93 cat so what we've done here is we've basically built a responsive area chart that i think looks pretty great and it resembles as closely as i could to this one inside of the exodus crypto wallet so recharge library has different components for everything for pie charts donut charts bar bars lines areas you can combine them in all sorts of different ways you can like overlay a pie chart over here on the right but what i like about it is you get full control of everything first by adding in the different components you want but then they give you all these props to like basically turn on and off different functionalities to format different values sometimes you're just formatting sort of a string value but i think for most of these you can pass a component and just full-on return the html that you want to show up so again the ones we worked with were the responsive container where the area chart sits inside and fills that area responsively the area chart that receives the data and then everything that's shown within that area chart so as an example now you know what i was going to add another value we could here value 2 and this would be like 5 or maybe 1 minus math.random so by default it wouldn't show up at all but if you wanted it to show up you could add another area and this would be value two and you could give it a different color uh what's another a there we go so there we just added another one and you can see that the tooltip is still only showing one of those values that's because i showed the first one in the array so if we wanted to show both we would just come down and maybe add another p that shows the second one and maybe this is the the usd version or something like that so now we have the canadian and usd charts so really easy to pass in sort of multiple data and have it show up here and that's all i wanted to show today i hope you enjoyed the video if you want to see more charts let me know because i was thinking about doing different types like pie charts and donut charts and all those things take care hope you have a great day bye

Channel: Leigh Halliday

Views: 44,149

Keywords: react charts, react area chart, react recharts tutorial

Id: e4en8kRqwe8

Length: 23min 10sec (1390 seconds)

Published: Sun Mar 14 2021