WEBVTT 1 00:00:00.350 --> 00:00:01.630 Hi guys, and welcome back. 2 00:00:01.630 --> 00:00:03.000 In this video, we're going to adjust 3 00:00:03.000 --> 00:00:05.980 the rotation of our x-axes ticks 4 00:00:05.980 --> 00:00:08.600 so that they fit a bit better in our screen. 5 00:00:08.600 --> 00:00:11.100 We're also going to explore the object-oriented approach 6 00:00:11.100 --> 00:00:12.620 for doing this, because by default 7 00:00:12.620 --> 00:00:15.220 we're always going to use the functional approach. 8 00:00:15.220 --> 00:00:18.070 But we'll also see why it's often not recommended 9 00:00:18.070 --> 00:00:20.010 to use the object-oriented approach 10 00:00:20.010 --> 00:00:23.450 for setting this specific configuration. 11 00:00:23.450 --> 00:00:24.443 So let's get to it. 12 00:00:25.430 --> 00:00:27.650 Now that we've got enough room in our figure 13 00:00:27.650 --> 00:00:32.650 for our rotated labels, all we have to do is do plt.x ticks 14 00:00:33.650 --> 00:00:36.330 and then rotation equal 30. 15 00:00:36.330 --> 00:00:38.830 The x ticks function can take a bunch more stuff, 16 00:00:38.830 --> 00:00:40.750 including the labels themselves. 17 00:00:40.750 --> 00:00:43.030 If we pass these in here, for example, 18 00:00:43.030 --> 00:00:46.330 and we also pass in these, 19 00:00:46.330 --> 00:00:49.330 then we can set the labels without having to pass them 20 00:00:49.330 --> 00:00:51.070 to the bar chart just like that. 21 00:00:51.070 --> 00:00:54.250 The x ticks function does need the index 22 00:00:54.250 --> 00:00:56.240 or the coordinates of each column, 23 00:00:56.240 --> 00:00:58.420 as well as the labels in order to do this. 24 00:00:58.420 --> 00:01:01.160 So we can run app.py and you'll see that 25 00:01:01.160 --> 00:01:02.590 now these are rotated. 26 00:01:02.590 --> 00:01:04.360 However, I strongly recommend 27 00:01:04.360 --> 00:01:06.090 that if you have a simple scenario 28 00:01:06.090 --> 00:01:07.550 like the one we've got here, 29 00:01:07.550 --> 00:01:10.810 you just call plt.x ticks with rotation equal 30 30 00:01:10.810 --> 00:01:12.320 and put the labels in there. 31 00:01:12.320 --> 00:01:13.520 Later on, we're go to learn 32 00:01:13.520 --> 00:01:15.070 when you might want to put the labels 33 00:01:15.070 --> 00:01:16.590 into this function directly. 34 00:01:16.590 --> 00:01:18.980 But I just wanted to show you that it can be done. 35 00:01:18.980 --> 00:01:20.770 All right, let's run this again. 36 00:01:20.770 --> 00:01:23.027 Because as you can see, there is something wrong here. 37 00:01:23.027 --> 00:01:25.580 And the rotation of the label has happened, 38 00:01:25.580 --> 00:01:29.890 but the label is still very much centred in the tick. 39 00:01:29.890 --> 00:01:32.260 So therefore, this is the middle of the label centre 40 00:01:32.260 --> 00:01:35.070 in the tick, and it sort of almost spans 41 00:01:35.070 --> 00:01:36.860 into the next column. 42 00:01:36.860 --> 00:01:37.970 So we want to avoid that. 43 00:01:37.970 --> 00:01:39.710 And how we can do that is by setting 44 00:01:39.710 --> 00:01:41.270 the horizontal alignment. 45 00:01:41.270 --> 00:01:43.520 And that is done with the ha parameter here. 46 00:01:43.520 --> 00:01:46.010 So we do ha, right and that is gonna add 47 00:01:46.010 --> 00:01:48.520 the horizontal alignment of the x ticks 48 00:01:48.520 --> 00:01:50.260 to be right aligned. 49 00:01:50.260 --> 00:01:52.883 And if we run this now, this looks a bit better. 50 00:01:54.170 --> 00:01:56.770 Let's learn how to use the object-oriented approach 51 00:01:56.770 --> 00:01:59.770 to do this instead of the functional approach. 52 00:01:59.770 --> 00:02:02.490 But let me preceed that with a warning. 53 00:02:02.490 --> 00:02:04.500 The object-oriented approach is valid, 54 00:02:04.500 --> 00:02:05.670 but it is a bit more advanced 55 00:02:05.670 --> 00:02:07.560 that changes some of the properties of the figure 56 00:02:07.560 --> 00:02:09.120 that we haven't learned about. 57 00:02:09.120 --> 00:02:11.350 And as such, it can produce some unwanted effects. 58 00:02:11.350 --> 00:02:13.410 But I want to show you how to do it anyway, 59 00:02:13.410 --> 00:02:15.650 just in case you come across it later on. 60 00:02:15.650 --> 00:02:17.620 So the first thing that we would want to do 61 00:02:17.620 --> 00:02:19.630 in the object-oriented approach is to do 62 00:02:19.630 --> 00:02:24.630 axes.set x tick labels, and we want to pass in here, 63 00:02:25.600 --> 00:02:27.470 the labels themselves, 64 00:02:27.470 --> 00:02:29.820 as well as rotation equal 30 let's see. 65 00:02:29.820 --> 00:02:33.690 So by doing this, we might be tempted to get rid 66 00:02:33.690 --> 00:02:37.290 of the tick labels directly, so just get rid of them there. 67 00:02:37.290 --> 00:02:40.200 But if we do this, we're no longer telling the axes 68 00:02:40.200 --> 00:02:43.160 how many ticks there are, we're only telling the axes, 69 00:02:43.160 --> 00:02:46.270 the names of the ticks that already exist. 70 00:02:46.270 --> 00:02:49.630 So I'm going to run app.py and you'll see what I mean. 71 00:02:49.630 --> 00:02:51.900 Here you can see that the first poll that we had 72 00:02:51.900 --> 00:02:53.740 has in fact disappeared, 73 00:02:53.740 --> 00:02:57.820 and we are left with an empty column label at the end. 74 00:02:57.820 --> 00:03:00.930 The reason for that is because by default, 75 00:03:00.930 --> 00:03:04.600 when matplotlib creates any sort of axes, 76 00:03:04.600 --> 00:03:07.340 it adds the number of ticks needed 77 00:03:07.340 --> 00:03:09.760 for displaying in the axes, which in this case, 78 00:03:09.760 --> 00:03:11.180 it's six ticks. 79 00:03:11.180 --> 00:03:12.540 As we can see, if we run this again 80 00:03:12.540 --> 00:03:14.860 I'll show you there're are six different ticks, 81 00:03:14.860 --> 00:03:18.380 and these are numbered from zero to five. 82 00:03:18.380 --> 00:03:22.820 However, matplotlib also creates one extra tick underneath, 83 00:03:22.820 --> 00:03:24.990 and one more tick at the top. 84 00:03:24.990 --> 00:03:27.850 So really we have eight ticks in this graph, 85 00:03:27.850 --> 00:03:29.320 but two of them are invisible. 86 00:03:29.320 --> 00:03:30.910 They go from minus one 87 00:03:30.910 --> 00:03:34.170 to zero, one, two, three, four, five and six, 88 00:03:34.170 --> 00:03:35.910 which is also invisible. 89 00:03:35.910 --> 00:03:39.060 When we assign the labels to the ticks, 90 00:03:39.060 --> 00:03:41.720 we're assigning them starting at the first tick, 91 00:03:41.720 --> 00:03:44.170 which is minus one, which is invisible. 92 00:03:44.170 --> 00:03:46.270 So really there's a tick minus one here 93 00:03:46.270 --> 00:03:48.200 that has the first label. 94 00:03:48.200 --> 00:03:51.160 And then tick number zero has the second label 95 00:03:51.160 --> 00:03:53.630 and tick number one has the third label and so on. 96 00:03:53.630 --> 00:03:57.000 So it's a bit confusing, and it's clearly not what we want. 97 00:03:57.000 --> 00:03:59.110 This is why I was saying the object-oriented approach 98 00:03:59.110 --> 00:04:00.070 changes a couple of things 99 00:04:00.070 --> 00:04:01.870 and that can make it a little bit more complicated. 100 00:04:01.870 --> 00:04:03.610 So the next thing that we have to do 101 00:04:03.610 --> 00:04:07.140 is say axes.set x ticks. 102 00:04:07.140 --> 00:04:10.640 and here we can specify what ticks we want. 103 00:04:10.640 --> 00:04:13.450 So we're gonna do range of length of polls 104 00:04:13.450 --> 00:04:17.300 and that is going to set the ticks to zero to five, 105 00:04:17.300 --> 00:04:19.620 instead of minus one to six. 106 00:04:19.620 --> 00:04:20.980 So, I'm gonna run this again 107 00:04:20.980 --> 00:04:23.140 and you'll see that now we get what we wanted. 108 00:04:23.140 --> 00:04:24.970 The horizontal alignment is off, 109 00:04:24.970 --> 00:04:27.010 but not a big deal at this point in time. 110 00:04:27.010 --> 00:04:28.560 So the object-oriented approach gives you 111 00:04:28.560 --> 00:04:30.150 a bit more flexibility, 112 00:04:30.150 --> 00:04:32.850 but at the cost of needing to know a bit better 113 00:04:32.850 --> 00:04:34.880 what's going on behind the scenes. 114 00:04:34.880 --> 00:04:37.640 So normally, especially for simple plots, 115 00:04:37.640 --> 00:04:40.360 I would recommend using plt.x ticks 116 00:04:40.360 --> 00:04:42.640 instead of the object-oriented approach. 117 00:04:42.640 --> 00:04:44.570 So I will go back to that. 118 00:04:44.570 --> 00:04:47.890 Rotation equal 30 and ha equal right, 119 00:04:47.890 --> 00:04:50.450 that's going to give us what we want, let's run this again. 120 00:04:50.450 --> 00:04:52.170 You can see that we've got these numbers here 121 00:04:52.170 --> 00:04:54.060 instead of the labels because we got rid of them 122 00:04:54.060 --> 00:04:55.943 so we do have to bring them back. 123 00:04:56.860 --> 00:04:58.910 And that is exactly what we wanted, 124 00:04:58.910 --> 00:05:00.470 now we've got the labels there. 125 00:05:00.470 --> 00:05:01.570 And with that, we're done. 126 00:05:01.570 --> 00:05:04.980 Our chart now looks excellent and the labels are visible. 127 00:05:04.980 --> 00:05:06.810 So thank you guys for joining me in this video. 128 00:05:06.810 --> 00:05:07.970 I hope you've learned something 129 00:05:07.970 --> 00:05:09.663 and I'll see you in the next one.