Beautiful.
And let's start working in the bar chart, since that's the first component that we display.
And like I mentioned in the previous video, the way the library works, we just get a bunch of components
from the library.
And yes, in general, you would need to reference the box which components are you looking for?
So in our case, we go with responsive container when we have the bar chart, which essentially sets
up the whole thing.
And then more specifically, we have the x axis y axis, the grid, the tooltip, as well as the bars.
So best represents all the bars we're going to have and then we pass in the properties.
And let's just start setting everything up and then I'll kind of cover as we go along.
And yes, this is going to be the case where I really don't see the point of typing these components.
Let me just grab them from the read me and we'll go to your bar chart.
Then let's set up those components.
Now, as far as the data, we remember, it is coming in as a prop.
So we want to access the data first.
In this case, we're not going to have any kind of styled component.
So essentially will rely on the components that are provided by labor, and 40 responsive containers
will provide a prop off with which is going to be 100 percent.
And then we need to provide the heart.
So, my gosh, I'm going to go with a 300.
Now, of course, if you want a bigger or smaller, that's up to you, I'm going to go with three.
Then we might as well remove this heading to because we're not going to use that.
We want to go with a bar chart and let's passed in the data as the data.
Now, at the moment, we're not accessing it on the y axis as well as the bar.
But for the time being, let's just pass it and that's what the library requires.
And I also want to add a little bit of margin where we need to pass in the object.
And we have top bottom left and right and all that.
My gosh, I only want to set the top equal to a 50.
So within the bar chart, let's start by setting up the grid.
So we go here with this component and then we can actually style the strokes.
So essentially regions over here in ours.
So that's the grid.
And as you can see, as I'm changing the values, those strokes in between those squares, there's also
going to change.
So I'm going to go with stroke bash on the right and I'm going to set it equal to three and three,
which seems to be pretty basic set up over there.
Then let's go with x axis.
So that's the components for the x axis.
And here's the key.
We go with data key prop.
Now we're specifically need to say, well, which one we're looking for.
So we have to we have a date.
And we also have the value.
Now you can either go and take a look in the actual browser or you can just scroll back and read me
and will notice that we have date and we have the cone and we just need to decide.
Well, which one will years?
So we need to pass in the data in the bar chart, which is going to be our parent.
So there is the proper name and then there is the data that is coming in from the charts container.
And as far as the data key, well, we have two options.
We either have date or we have count.
So in our case, we want to go with date like show and that should date for the x axis.
We're done.
And notice how this is a parent.
Both of these ones are and these ones, we're just stacking one on top of each other.
We want to add the tooltip.
That's another component.
And then we want to also set up the y axis.
My apologies, actually, before the tooltip went, don't set up over here, the y axis and in here,
we're not going to pass anything in, but I do want to set up allow decimals equal to false because
it's all a bit annoying when we have months, for example, showcase that if this one is in a decimal
kind of doesn't make sense to me where we're I'm sorry, not months the count of jobs.
So this actually, in my opinion, should be a whole number.
That's what got our best and most, and we'll set it equal to false.
Let's also close it, and the last thing is going to be the actual bar component.
Again, we'll set up a data key, which will be equal to a count in this case.
Then for to fill, we can come up with some kind of colour rather dramatic.
There's going to be hashtag and then to see B one b c, and we also can set up the bar size.
So essentially how wide is going to be.
And when I was testing, I kind of settled on seventy five.
But there's always something that you can set up, however you like.
Now let me navigate back to the browser and I can see that there's a little bit of an issue.
And yep, I'm importing the bar chart, but I actually named my component over here.
So why don't we rename this one say component?
And let's not forget to actually export as well?
But Mr.
And I also want to do the same thing in the read me.
So we don't have any confusion.
I'll say over here component.
Let me say this one.
And once I navigate back to the browser, check it out.
We have our nice bar chart, so we don't have the area yet, but this is our bar chart is going to look
like.
So in July, we applied to one job and in December we applied to five jobs.