1
00:00:00,360 --> 00:00:00,810
Beautiful.

2
00:00:01,340 --> 00:00:07,510
And once we have the bar chart in place to do the same thing with area chart and the setup is exactly

3
00:00:07,510 --> 00:00:08,010
the same.

4
00:00:08,400 --> 00:00:12,390
So grab these components from the library first.

5
00:00:12,960 --> 00:00:19,710
When we're accessing the same data, pretty much set up the responsive container, yada yada yada.

6
00:00:20,280 --> 00:00:22,710
And we go with area chart instead.

7
00:00:22,950 --> 00:00:24,690
We still passing that data.

8
00:00:24,780 --> 00:00:28,860
So data prop equals to our data a little bit of margin.

9
00:00:29,250 --> 00:00:32,310
Going grid x axis is going to be a date.

10
00:00:32,759 --> 00:00:36,930
Then for y axis, we won't use the decimals.

11
00:00:36,930 --> 00:00:38,310
We'll still use the tooltip.

12
00:00:38,640 --> 00:00:43,350
And when it comes to area, we'll just pass there a few more drops.

13
00:00:43,740 --> 00:00:48,480
But as far as the data key, it's going to be equal to our current property.

14
00:00:48,930 --> 00:00:50,160
So let's start working on that.

15
00:00:50,160 --> 00:00:55,020
Let's just remember that we need to rename the components are back in the area chart.

16
00:00:55,830 --> 00:00:57,240
Let's copy and paste.

17
00:00:57,660 --> 00:01:00,570
Say that we're looking for the component.

18
00:01:01,540 --> 00:01:10,400
And let's also add that one to the export ban, let's look for our data and let's set up our return.

19
00:01:10,420 --> 00:01:16,390
We're going to go with responsive container looking for some kind of with which in our case, it's going

20
00:01:16,390 --> 00:01:23,920
to be equal to 100 percent, then let's set up the all right, which in this case is also going to be

21
00:01:24,250 --> 00:01:26,080
under and running side of it.

22
00:01:26,080 --> 00:01:32,470
Let's remove the area chart next and let's go with area chart component.

23
00:01:33,160 --> 00:01:35,530
So not the actual component.

24
00:01:36,100 --> 00:01:40,420
We're looking for area chart that is coming from the library.

25
00:01:40,780 --> 00:01:42,970
One data is equal to our data.

26
00:01:43,570 --> 00:01:49,870
And I also want to add the margin the same way we're passing the object and our setup is equal to a

27
00:01:49,900 --> 00:01:52,780
50 then inside of the area chart.

28
00:01:53,230 --> 00:01:54,250
Let's go with that.

29
00:01:54,820 --> 00:01:55,390
Go ahead one.

30
00:01:56,020 --> 00:01:57,580
So we'll go with Grid.

31
00:01:58,000 --> 00:02:03,250
And let's add the strokes here and I want will be equal to three and three.

32
00:02:03,520 --> 00:02:08,139
Let's close this and we want to go with x axis y axis.

33
00:02:08,530 --> 00:02:15,310
So x axis pretty much is going to be exactly the same as well as the y axis as in the bar chart.

34
00:02:15,310 --> 00:02:16,450
But I don't want to copy.

35
00:02:16,460 --> 00:02:20,610
So let's just go here with key equal to a date.

36
00:02:21,150 --> 00:02:28,460
Let's again close it and we have the same thing for the y axis where we don't want to use the decimal.

37
00:02:28,540 --> 00:02:35,120
So let's go over here with allow decimals, and let's set it equal to a false.

38
00:02:35,560 --> 00:02:37,480
And we want to the tooltip.

39
00:02:38,450 --> 00:02:41,840
And lastly, let's go with that area, one area over here.

40
00:02:42,140 --> 00:02:45,980
One type of set it equal to a monotone.

41
00:02:47,000 --> 00:02:52,190
And we want to go with data key again now in this case, we're looking for a recount.

42
00:02:52,880 --> 00:03:00,530
So for the x axis or state now for the area, it is actually count, then as far as the stroke.

43
00:03:00,800 --> 00:03:02,860
I'm going to go with this value.

44
00:03:02,870 --> 00:03:03,860
So hashtag.

45
00:03:04,010 --> 00:03:06,200
And then to see be.

46
00:03:07,130 --> 00:03:15,410
And one B.C., which essentially is the same as I have for the bar chart and then for to fill will go

47
00:03:15,410 --> 00:03:20,620
with a little bit different ones or hashtag B, e f and F A.

48
00:03:20,780 --> 00:03:24,500
And then the let's close the area, let's save it.

49
00:03:25,010 --> 00:03:31,130
And once we navigate to the browser, not only do we have the bar chart, but once we click on area

50
00:03:31,130 --> 00:03:34,610
chart, we also display that chart as well.

51
00:03:34,940 --> 00:03:42,860
And with this in place now, we can start setting up the search functionality in the all jobs page.