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