Upgrade Your REPORT DESIGN in Power BI | Complete Walkthrough From A to Z

creating a good-looking power bi report can be quite challenging you've probably seen tons of different examples where you thought how did they ever achieve that however knowing a few little things here and there can open so many new possibilities and make the whole design process so much easier and that's what we're gonna focus on in this video i'm gonna take this report and turn it into this one now let's get started [Applause] welcome to how to power bi my name is boss and if this is the very first time for you visiting this channel then make sure to hit that subscribe button to stay up to date on all of my videos which i share everything i know about power bi let's do a report makeover with this as our starting point and you can see there's quite some work to be done now let's dive in straight away and go over all of the steps to get to this end result and usually one of the first decisions that i take is the page size now here i want to have more of a vertical page instead of the 16x9 which is the default so i'm going to change that by going here to the formatting options for the page then here we have canvas settings and here we can go for custom now let's say that we take for the height 1200 and then for the width let's go for a thousand now the next thing that i do is change the background colors that we can clearly see also the borders of each visual so i go here to canvas background now here for the color we can go for a gray background and put the transparency to zero now you see this looks very much like windows 95 gray so let's change it a little bit so i'm going to go back more colors and my go to gray color is falling 240 and then 243 and then 247. now this is more of a silver gray which looks a little bit more modern so now that we have applied a different background color you can clearly see the borders of each visual now the next thing that we can do is resize the visuals and reposition them on the page now the main graphs are these two here at the top we have total sales and well again total sales no over here that should be total cost so let's go here to formatting general title and say over here this is total cost let's take this chart and put it here at the bottom all right now our main metrics are total sales and total cost now these charts that we have there in the middle they are kind of related to sales and they might not be interesting for everybody only for those people that want to see a little bit more detail so later on we can also add a button to show them and hide them now to resize the visuals you could of course take the visual go to the bottom right corner resize it just like this however i always try to be a little bit more exact than that instead of this i would take the chart go here to formatting options general and then here on the properties there we can decide on the size and also the exact position on the page now here for the height let's put in let's say 200 and then here for the width let's go for 800. now if i want to have it exactly in the middle i would need 100 pixels from the left hand side so horizontal i need to put in a hundred and you see i have that 100 pixels to the left and 100 pixels to the right now here how many pixels do i want at the top let's go for 150. now for all of the other charts we can do it in exactly the same way so let's go to the next one this one over here and let's first choose the position now i know that it needs to be 100 pixels from the left so let's put in 100 and then what number do we put in here for vertical well i know that the chart at the top is 150 pixels from the top it's 200 high so therefore we are at 350 and let's say the space below it needs to be 50. so add these numbers up and we get to 400 so that's why i put in here 400 and this way we are pixel perfect okay so everything is perfectly positioned now what is the width that we can put in here well here i would like to have the sales by class later on below it and then here the sales by subcategory would like to be on the right hand side just like this so if i know that i have two charts that need to be next to one another and i know that the width all the way from the left hand side of the love chart and the right hand side of the right chart is 800 pixels and i want to have let's say 100 pixels in between then i need to have each chart 350 pixels wide okay so 350 plus 350 700 plus the 100 in the middle is 800 okay so let's go to the first one and then over here we can say that it needs to be 350 right and let's do for the height uh 230 maybe a little bit more than the one that's at the top and then for the sales by subcategory there we can also go for a width of 350. and what should be the horizontal number that we put in here for position that should be 550 okay because we have 350 plus the 100 on the left plus 100 on the right gets us to 550. now let me do this very quickly for all of the other ones now you see that by just aligning all of the visuals and applying a different background color everything looks already so much better you're probably thinking what's up with the space here in the middle why isn't it exactly the same as the space there vertically that's because i will need that space a bit later so now it's time to focus on the visuals themselves a bit now first starting off here with the slicer now you see we just have three different countries so if you have it's just a few items and this is the only slicer then probably for this report page i wouldn't show it like this i would show them as buttons so if you go to format then here slicer settings you can change the orientation to horizontal and then if you make it a little bit wider then you see we have these buttons okay now let's make it look just a bit better so we don't need the header so that one we can turn off and then also we can make it less high so that it doesn't take that much space and align it here with the text now the background color i don't want to have so i go here to general effects and then here the background color we can turn off now for the ones that are currently not selected i can go here to visual and then values then here for the font color let's make the font color just a little bit lighter okay now i'm going to put it a little bit to the right so that that last button aligns with the chart now let's go to the main charts now here you see we have mainly column bar charts which is one of my favorite charts and generally good however here for total sales which we are showing over time well up to 12 points i think a column chart could be fine however if you go over then probably a line chart and every chart would be better so i'm gonna change this to an area chart not just in case that we have multiple years in the future so i'm going to change this to either a line chart or an area chart now let's go for an area chart looks maybe a little bit more interesting okay now then the next thing that i do is i try to get rid of as many elements as possible and then only add what i think is necessary and adds to the readability of the chart so for example in this case we could remove the title from the axis we don't need it so i'm going to go here to format and then here for the x axis i'm going to turn the title off and what about the y axis well actually we could also remove that one so let's go here to the y axis and first get rid of the title and then turn off the y-axis now okay looks cleaner but now i have no clue what the values are so instead of going for the y-axis because we just have a few data points maybe it's better to go for the labels in this case all right so let's add some data labels to all of the data points and let's maybe also add a few markers if you like markers to improve the readability now you see that already looks quite a bit cleaner now just to double check how it looks for the other countries germany france you see looks pretty good now i want to apply similar changes to the other charts on the page now for example here sales by subcategory there we also have titles for the x and y axes i want to remove those and maybe instead of the x-axis i want to show data labels now instead of having to redo all of these changes again i just take the first chart go to the home tab format painter all right so now we can just copy the formatting of that first chart to the next one and then i just repeat that for all of the other charts now once that is done we can also change that chart here at the bottom total cost to the same chart type as we have there at the top which was that area chart for all of the values that we show in the data labels it also shows the display unit millions which might be a good thing however it also takes quite a bit of space and maybe takes away from the readability and in this case i think it's not strictly necessary if you know that all of the values are a million so you place it somewhere in your report that the values are in millions so instead of that i want to go to the formatting and then data labels and then say over here on the values that the display units should be well millions but without the sign now we cannot say that over here so instead of that we could put it to none and we'll see then we see the full value however work with the custom formatting strings now here we are showing total sales so i selected the total sales measure and then here in the format there we can put our custom formatting string now if you don't know how they work just check out this video over here but i'm here we could say that we want to show the values in values which you can do as follows pawn symbol comma bouncing bound symbol zero and then two commas to say we wanna get rid of six zeros and we want to have one decimal so dot is zero just like this now press enter let's see that looks good but for the other ones there we still need to go to those charts one by one and then here on the data labels values there we still need to say that the display units should be none another thing that's important is that you always check the readability of everything that's in your report now here for the sales by subcategory this chart there we have a problem with what we are showing on the y-axis because the subcategory names are not always readable so i'm going into y-axis and then just increase the max area with all right so that's much better and then also here for the average custom price chart there instead of having here average unit cost i can just say unit cost and unit price so let's rename these two so that it takes less space now then the title we can change so let's go here to format general title and then here we can just say unit price versus cost and then put here that is the average now here for this chart i find it a little bit more intuitive if the unit price comes first so i just put the unit price before the unit cost another thing that's very important to check is always the y-axis of each visual now for example let's take that area chart here at the top now it doesn't start at zero so it means it fluctuates much more and maybe the actual development is much flatter than it seems to be so i'm going to take that area chart and then go here to the y axis i'm going to put the minimum to zero you see that looks quite a bit different and then after you change it to zero just turn the y axis off again and then you do the same for the chart that's there at the bottom total cost then the next thing that i would usually do is go over all of the titles of the charts that i have on this report page to make them a little bit more insightful now here at the moment it's pretty straightforward right so we have sales by class sales by subcategory but we could add extra information to the titles to add a little bit more context or maybe make use of dynamic titles which you can check out over here for now let's just say that the titles are good enough and let's go to the fun part how can we now make this report really stand out and add something unique to it to take it to the next level now i would say that if you don't need anything fancy this is okay however if you want to add a bit more creativity then let me show you how you could do that now for example for the background color we could add a gradient now here in power bi that is not possible so here in the canvas background we can just choose colors not gradients so we have to go to powerpoint create a gradient background and then use that over here now i'm going to open powerpoint and then just add a new page get rid of any text boxes that are on the page then go to design and here for the slide size you can choose the same slide size as you have for the power bi report page and here we can choose a custom width and height now it shows in centimeters or in inches but instead of that you can also just say okay we want to have 1000 pixels px white and then you go to the height and you can also put it over here in pixels so 1200 pixels high all right then click on ok then ensure fit and there you go now the next thing is then to apply a gradient background color so i go here to format background and then choose gradient fill now here for the gradient fill i already set up something so here we could say that we want to have radio and then the direction from the bottom left corner and then here you can play around with where different colors start where the end how many stops in between usually i just go for two choose a darker color because i want to go for a darker background for this example and then here a color that is just a little bit lighter now of course this is just draw an error and see what you like now here you can also play around with the position transparency and brightness and once you have exactly that background that you want then you go to file save as and now the important part here you want to choose svg so not jpeg or png because then when it stretches it gets a very bad quality and with svg you don't have this problem it can be as big as you want all right so svg that's important give it a name so here this is going to be my power bi background and then only this slide now then go back to power bi and then here for the page settings canvas background then we can choose that picture now the image fit also important here you want to go for fit and see it exactly then fits to the entire page now because we are now switching from a light background to a dark background we have to make some updates to the text and to the charts okay so let's go for example here to the top to the title where we then can choose for a white color text now let's then go to the chart right below it now here we could leave the background color however i want this design to be a bit more unique and instead of having a background color i'm going to get rid of the background color so here in the general we can go to effects and turn the background color off and you see that the text is a bit difficult to read so therefore let's update the font colors that we have for the x-axis the data labels and the title so here for visual here we can go to data labels and then values and then choose a white column you do the same for the axis so let's go to the x-axis also here color white and then last but not least the title so general title and then text color white and now we want to make similar changes to the other ones so home tab format painter and just copy over the formatting from the first one to the next ones and there you go here you see it looks quite unique however for me it's a bit too blue so let's look for different colors that would match this background color now how can you figure out what actually matches well there are different websites that help you do this for example the color wheel from adobe lets you put in a color and you see what the matching colors would be and you have different options between complementary split complementary etc now if you want to have complete color palettes then you can also go to websites like color hunt and there's another one that's called coolers dot co where you have different color palettes already created for you and you see exactly what colors would match now for example here i kind of like this one where we have almost the same kind of blue as what we have for the background and you see we have this orange and maybe this green bluish color that we could use now let's first take the orange one and go back to power bi and then here for the first chart i'm going to use those colors so here lines and then here on the colors instead of blue i'm gonna use that color and now that we are updating the color here for shade area i'm just gonna put this up a little bit so that there's a little bit more transparency okay perfect and then we can go here to the next one sales by subcategory also here i would change the color for the bars to that same color orange and just like this i do it for the other ones as well alright so that is done and you can see that for the lower chart i went for a different color this blue is green because each color needs to mean something everything that's orange is related to the sales information everything that's blue and green is related to total cost now the only thing that bothers me is that maybe it looks a little bit too flat and instead of having here just one orange color you could also go into formatting bars and apply gradient formatting so let's go for gradient and then here based on the sales where the highest gets our orange color and then the lowest there we go a little bit lighter and maybe also add a middle one just like this click ok and see that might make it look just a bit more interesting and then of course get rid of the legend and then copy that formatting also to the other one now when it comes to colors and making all of these changes now i'm just doing it for one page so i use the format painter however if this would be a bigger report i would make use of the themes so then i would set up a theme using over here to customize current theme option to set it up exactly with those colors that i need for the report now i think it starts to look quite good however what still bothers me is that because there's no background color to the charts it feels a bit unstructured and to bring a little bit of structure i want to add these lines and dots to it just like this so that there's a bit of structure so now the question how can you create something like that so we can just use powerpoint which is available to almost everybody so how does that work now first of all you need to create a screenshot of the report page as it is at the moment now to do that you can do alt shift as and then just take a screenshot of your report now you see now i have that screenshot which i'm going to copy over to powerpoint so here powerpoint first solid fill white then i paste in the picture and now we can create the lines that we want to show so let's go to insert and let's start with the circles first and i want i want to have a circle over here so hold the shift key to make it an even circle and then i go for a white filling and then here for shape effects i would like to have a little bit of shadow in the bottom right corner now to adjust that shadow we can go here to form a shape first i get rid of the line around it and then here i go to special effects shadow and say that the shadow should be white and then over here we can play around with the transparency and size but for now let's just leave it as this and now i just duplicate it a few times to all of the places where i like it to be now after you have these shapes we could add lines in between them now instead of the normal line i go for the rectangle because that gives us a little bit more options because now we can say we don't want to have a line we want to have a gradient fill and otherwise you would not have this gradient fill option and here we have to make a few adjustments so we can say that both the left as well as the right hand side should be white however here for the left we're going to put the transparency to 100 now it might be that you have to rotate it so we can click here on the rotate button and then just say flip vertically and now we can just choose the width and the height that we need now for the width let's put in five pixels okay so also here you can just type in pixels and then here for the height let's go for seven and then put it more or less in the middle of these circles okay and you see i still have the borderline so i take the line and put the border line off now i like it that it goes to the bottom of the other chart over here and now i just want to take it again copy paste that then i want to rotate it so here the shape format rotates we can flip it like this and then we take the line and put it here a little bit above the other circles and make it less wide which you can do by adjusting the height to let's say five or a little bit less there you go and now we just need a connecting line to that dot over there and that's it okay so i'm happy with how it looks now i need to take only those lines not the background and then first i would group it and after you group it now you can right click on the group and then save as picture and that is then the picture that we can use in our power bi report now also here it's important that you go for svg okay so svg because then we can make it as big without losing any quality so let's call this one tree lines power bi and then back in power bi you probably want to go to insert image and then from here choose the image that you just created but svg images are not an option okay so what is the workaround well instead of using the image you can as a workaround use buttons and then go for black button make it a little bit bigger over here and then you go to style now in the style there we have fill so let's turn this one on and then here we can go for browse and then look for the picture and you see now we can choose svg however after you do this you see it doesn't look quite right now here there's transparency so you might think okay let's put the transparency to zero but then it's all white because there's still the white color background so it doesn't seem to be possible now you could go for icons but with icons you have the trouble troubles that it's not so easy to resize it in the exact way that you would like it to be so what is the workaround we can make use of conditional formatting now here let's add the following measure let's call it background transparent and then here we can just type in rgba which is a column model to define a certain color and then you just type in 255 255 255 and the last argument here that is for the transparency now if you put this to zero and then close the brackets it means completely transparent background okay or completely transparent color which we can now apply to the background so let's go back to our button and then here for the color we can use conditional formatting then switch to field value and choose the measure with that transparent color okay so background transparent click okay and you see we have a transparent background now the only thing that we still need to change is the image fit to fit all right so that it nicely fits and now we just have to reposition it so that it looks a little bit better and over here once you resize it to exactly the same size as it was in powerpoint you see it nicely fits now let's then also get rid of the border lines so here borderlines let's turn them off and that's it we have this special effect in our report and this creates i think a little bit more structure when you don't have the background colors for the charts now to make it a little bit more visible that these area charts are the main charts i'm just going to go here to formatting options and then for the title i'm just going to increase the font size and do the same thing for the other one and now the last thing that's still really important is well do we really need to show all of these charts to every person that looks at this report or is it for most of the people actually only relevant to see the total sales and total cost development and only for a few interested people to see all of these breakdowns well if that is the case then maybe we don't want to show these visuals at all and another consideration is that when we go to this page all of these visuals need to be loaded so it takes a little bit of time to open this report page if you have a lot of visuals and what you can do then is maybe hide the visuals so that they also don't get loaded when you go to the page and only for those people that want to see it click a button and only then show these visuals now first of all let me prove my points by going here to view and then here we have performance analyzer and then i go first to a different page start recording and then go to this page over here okay then you see all of the visuals that get loaded however if we would hide those in the middle they would not be loaded right so if we go here to the selection pane and select here the visuals in the middle and then hide them and then i go back to the empty page start recording go back to my example then you see well the hidden visualizations they don't get loaded okay so if you have performance issues well this could be a consideration to hide some of the visuals on the page first and only load them when somebody wants to see the visual okay now how could we integrate this concept nicely in this report page now let's do the following let's first bring back the visuals that were hidden now here always keep everything nicely organized you see at the moment it's kind of a mess so let's go visual by visual and give them a different name for example here let's start at the top text box well that is my title i drag it to the top and then over here instead of text box i'm going to call it title and i do this for all of the other videos as well until i have everything organized so now that everything is tied up let's work with buttons and bookmarks to show those charts in the middle only when i want them to show okay now first the buttons where can we get nice looking buttons from now also here they have plenty of different websites that you could use for example one that i often use is flat icon.com now here just look for let's say a plus icon and a minus icon now once you've found the icon that you want to use just adjust it download it and then insert it on a button in power bi so here in power bi i go to insert and then here i can choose a button go for blank button and then here you go to style and then for fill there we can turn that one on turn icon off and you can do the same trick or you go for the icon it's also possible here okay now here i'm going to do the same trick as before so i'm going to choose background transparent put the transparency to zero and then browse for the picture that i just downloaded and then for the image fit either go for fit or fill and then resize it and then you do exactly the same for the minus sign as well so i inserted the minus icon and the plus icon then once you have them then position them exactly there where you want them to be so here for me that is right next to the first main chart total sales and i've placed one on top of the other one now with the selection pane open we can now create our two views the one where all of the charts are visible and the one where the middle charts are hidden so let's try this out so i'm going to first create the open view now when i say view i'm talking about bookmarks okay that capture basically the state of all of the visuals so also here we need to go to view bookmarks open the bookmarks panel so this is how i want it to look like when everything is open right so now let's capture that state by adding a bookmark and rename it to open okay and then we can do the same thing for the closed state so hide all of the charts that you don't want to show when it's closed so the ones that are in the middle here and the three lines as well now here we don't want to show the minus icon but we do want to show the plus icon and then what about the chart here well we want to have it probably a bit higher the problem is though bookmarks don't capture the position which would be nice however as a workaround we could if we want this one to shift we could duplicate it so just copy paste it and place it wherever you like it to be the other one that we have here at the bottom we just hide for the time being all right now this is the closed state now to capture that state we add a bookmark and call this one closed now let's check if it works i click here on open now you see that copy of the total cost chart in the middle well that one we don't want to show but it wasn't there when we created that previous bookmark so we have to update it so let's hide that copy and then go here to open and just update the bookmark now let's see if it works let's click on closed and then open you see now it works now with bookmarks you have to be a bit careful because if we now switch let's say the slicer to germany and now i click on closed let's see it switches back to france that is because for the bookmarks you have these little check marks so here we also store or capture the filtering in the sorting state when data is checked so therefore i don't want to have it okay because this could be very confusing for the end user for this case okay now what about display display is important because we need to capture the whether a visual is visible or hidden okay so that one we leave and what about the current page well that one switches to the page on which the bookmark is which we are anyways when we click on that button so that doesn't matter too much and then what about all visuals there's selected visuals all visuals well captures the state of everything that's on your report which can be a little bit dangerous so therefore and go for selected visuals all right so if we select selected visuals then we have to update the bookmarks again so now i only select those visuals that i want to capture this date off so for example title and slicer i don't need to select and then here this is my closed bookmark so i update this one and then i go to the open bookmark and i repeat the same process so also here i want to have only selected visuals and let's update the bookmark alright so now let's test the bookmarks when i click on open opens up those charts in the middle if i click and close it closes it okay so that is working however how to trigger the bookmarks well for that we can just go to the button for the plus icon go to action turn it on then over here we can choose bookmark action where we can now choose open so that when we click on it holding the control key then it opens up the charts okay now then we have the minus button now also here we can add an action it's going to be a bookmark action and the bookmark that we want to trigger is the close so now hold the ctrl key and try it out again so this closes it and this opens it up all right so that's it i think it looks quite a bit better if you compare this to what we started off with over here now i hope that along the way you learned a few new tips and tricks that make this whole design process less intimidating and much easier now you see that with simple tools like powerpoint you can create unique design elements that you can then use in power bi now if you have any questions then post them in the comment section below if you like this video then consider subscribing and if you want to see some other videos on design then check out these videos over here thank you for watching and hope to see you in the next video

Channel: How to Power BI

Views: 519,038

Keywords: power bi, power bi tutorial, power bi dashboard design, power bi dashboard examples, power bi dashboard tutorial, data training, how to power bi, howtopowerbi, creating a powerbi report, power bi visualization, power bi custom background, power bi report, power bi report design, power bi report upgrade, power bi dashboard, power bi example, power bi visuals, power bi examples, power bi design, power bi report step by step, power bi kpi dashboard

Id: Lfzu74XDyco

Length: 33min 24sec (2004 seconds)

Published: Mon May 30 2022