https://github.com/Artchibald/WTW-Microsoft-Power-BI-templates
https://github.com/MattRudy/PowerBI-ThemeTemplates/
https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-report-themes
https://wtwbrandcentral.com/content/charts-and-graphs
archie ATSYMBOL archibaldbutler.com
https://www.youtube.com/watch?v=-FG0DSSAr60&ab_channel=RADACAD
Colour formula
Data Color = lookupvalue( Color[Color], Color[DataValue], SELECTEDVALUE(SalesOrders[item]), "Light blue" )
A bit fiddly! Power Bi desktop only works on Windows.
To amend a theme file:
Look at the module or global theme file with all options included. They are in the json files without the WTW prefix in original templates.
Compare that to the WTW prefixed equivalent and amend the WTW file as necessary (in WTW-templates).
Once you are happy with your amends on the individual WTW prefixed module (we don't want to edit the originals that don't have prefixes, they are references), you should copy the module across from the individual json file into the correct position in WTW-theme.json and test that file in Power Bi. It contains all the theme styles for all the modules.
It is a little fiddly but not too complex!
Some important aspects are not controlled in the theme file. Sometimes the chart doesn't update if you bring in the theme file after adding the chart, this is a known bug.
Therefore it is wise to supply the JSON theme file and the Power BI template in this repo (.pbix). Styling guide is a mix of both of these files.
Power BI Json styling is not css. It is specific to this software, many aspects such as padding and margin are not editable in the JSON theme file. Therefore we do not have full control over the styling of these templates. This is more of a general guidelines.
We are trying to replicate every module in one master WTW theme file for as much brand consistency as possible across all Power Bi usages.
We use maths to add elements to the 1920 x 1080 canvas with equal margins on all sides.
top title text 1
height 70 width 767 horiz 128 vert 100
chart 1
w h 767 horiz 128 vert 155
top title text 2
height 70 width 767 horiz 1024 vert 100
chart 2
767x767 horiz 1024 vert 155
last optional bottom text 1
100x767 horiz 128 vert 940
last optional bottom text 2
100x767 1024 940
- choose inside or out on labels
- Special effects exploration
- black text on white in labels
- accessibility is key
- see some options available
- see microsoft visual impairements settings, to be considered
- they've donne mathematical tests, this won't pass
- export as pdf or screenshot
- get specs for bg image
- wtw footer area
- logo up top option
- Think about instructions
- sample dashboard ideas? white space?
- Make suggestions for usability
- From an accessibility stand point I think we are in a good place, I await feedback on that.
- Default display is 16:9. So the dimensions for a potential branded background image would be 2880px x 1620px png (png for block colors), ideally size optimized at tinypng.com. Branding can be placed in header or footer as per Katie's recommendation.
- Power BI isn't responsive on app.powerbi.com, see attached pdf of screenshots.
table of colors in the styleguide write docs well for their toolkit
multi row carsd needs banded grey
tableEx needs banded grey
if you oevrride any style, dont save. so the theme works.
we need clear guidance
modules interchangeable
use Funnel chart color purple as the base color 7f35b2
Same for treemap use the purple there as base color for all
Katie 's note about Amber not being Onyx, but on amber bg
Black filter issue on filters with suzie
tables need grey rows for legibility
buttons
Table global overriding alternate shading matrix pivot tabo table ex multi row card
If you right click on reset settings you can reset all settings
Do a 16:9 font version size decrease and dot decrease divided by 2 size title 20px body 14px reduce data point square sizes
Send a budget breakdown
Find out how to erase all styling data in a pbix correctly
- USE SEGOE UI
- see onyx separate branding uxco website
- Power Bi doesn't support strokes in visuals
- Power Bi doesn't support custom padding/margin
- Do we have templates to work from
- Background image creation?
- HELP Foreground image creation - send examples
- Tooltips
- Drill through maybe
- add buttons
- style content for branding
- baseline json template for power bi
- see powerbi theme template github
- colour, order, charts, graphs,
- suzie leading brand
- katie digital review
- test
- same ux ui
- can't change font (segoe ui)
- find microsoft scripts you can grab
- basic styled out of the box
- put together a sample dashboard
- put together some samples of what we can do
- specific order of colour in graphs
- client facing applications
- they need someone to get it started
- creating a theme for clients
- q2 is next year, will be needed
- someone will test them after
- step 1: do some examples
- checkout power bi login issues
- Suzie A reach out with issues
- no hard deadline
- deliverable is a json file that they pull into Power BI
- Brief: Develop a complete set of data visualisations in line with the new WTW 2022 branding.
- Default templates are in this repository: https://github.com/MattRudy/PowerBI-ThemeTemplates
- All visuals for Power BI that will require rebranding:
Area Chart Azure Map Button Card Clustered Bar Chart Clustered Column Chart Decomposition Tree Donut Chart Esri ArcGIS Map Filled Map Funnel Chart Gauge Hundred Percent Stacked Bar Chart Hundred Percent Stacked Column Chart Image Key Influencers KPI Line Chart Line and Clustered Column Chart Line and Stacked Column Chart Map Matrix Multi-row Card Pie Chart Q&A Ribbon Chart Scatter Chart Shape Shape Map Slicer Stacked Area Chart Stacked Bar Chart Stacked Column Chart Table Textbox Treemap Waterfall
Steps:
- Day 1 (1 day) Set up a new public repo Advanced research and potentially post to the Power BI forum for expert free help
- Day 2 (2 days) Create some automation strategies based on the research such as global search and replace in all json files to speed up the development process
- Day 4 (1 day) Prepare 4 graphs with new branding and send for review
- Day 5 (1 day) Implement initial feedback
- Day 6 (4 days) Replicate branding in code across all graphs in all theme json files
- Day 10 (2 days) Send all Power BI templates for review, write documentation, clean up
- Day 12 (1 day) Implement all feedback
- Day 13 (1 day) Implement feedback round 2
- Adding 25% more time only to the estimate for blockers as this is quite a straight forward project.
- Initial development estimate:
- 14 to 18 working days for full project completion.
- Hardware compatibility issues, 1/2 day no charge
- Day 1 : Set up repo, research, experiment with Power Bi, tutorials and docs on theming
- Day 2: Strategy in place, more experimentation, created a global theme json file and 2 modules.
- Day 3: call at 3pm, spent morning trialling different solutions, pushed next stage to Wednesday 28 Sept, rewrote Illustrator Icon Script for Chris Mc Dermott for 2 hours
- Day 4: Extensive review of UX, amends from yesterday call around typography, extensive trials with JSON and styling throughout the day
- Day 5: Nearly finished adding every module into a master template pbix file. Had call at 3pm, edited all modules in json and pbix interface to hit accessibility standards.
- Day 6: Finished accessibility implementation aand sent for review at 1230. Looking at accessibility checks, publishing to online app, looking at using other data. Mixed templates and data in the afternoon, nioticed custom modules arent getting styled.
- Day 7, 30 Sept: Spent more than half of day fixing the Marine Pandl jquery by updating it using global search and replace. Worked on typography and amends from Suzie for Power BI json templates.
- Day 8, 3 Oct: Reviewed and sent latest Power BI work. Spent the afternoon tweaking and researching new features we can include.
- Day 9 4 Oct: Changed all dimensions of canvases and re-arranged charts. Received, reviewing and implementing feedback
- Day 10 5 Oct: Doing feedback, quite slow and fiddly
- Day 11 6 Oct: had to implement typography declarations across all modules for consistency, took all day.
- Day 12 7 Oct, finished all amends and presented.
- Half Day 13 Monday 10 Oct: 1/2 day More amends to shapes, tables, treemap and funnel. Moved back into .ai script in the afternoon. Spent 2 days on .ai script in spearate project.
- Half Day 14 12/10/22 1/2 day, created video tutorial and amended readme with better info.
- Day 15 27/10/22 1 whole day tweaking and researching why theme is not working as expected
- Day 16 28/10/22 (today) Redoing main theme for 16:9 instead of 1920x1080. Looking at buttons and tables.
Hereβs our final color palette for Funnel and Tree only. Below is the order of the colors used:
Get them here or view the visual list below
- Are you working with Themes in Power BI but confused about the visual formatting options (visualStyles)?
- Have you struggled while trying to make sense of the Power BI report themes documentation?
- Do you like JSON?
- Do you like sample code?
- Do you like other people doing most of the labor for you?
If you answered "Yes" to any of the questions above, this repo is for YOU!
Changing colors in Power BI themes is fairly straightforward. For formatting, the wildcard(*) to make universal changes is convenient. If you want to go deeper into individual visual properties, however, it can quickly get confusing. With these sample templates, explore the individual properties available to each visual (as well as shapes and images). Combine the per-visual templates as needed, alter the values to correspond to your own needs, and build your own Power BI theme.
The purpose of this repository is to provide detail-level reference for each native visual in its own separate file. Look at the format options for a visual in Power BI Desktop and compare to the JSON options side by side. Copy and paste what you need from each visual's JSON to assemble a master Theme file.
Please note that the values in these sample files will appear ugly. Many values are not Power BI's defaults. As soon as something worked, I moved on to the next property. Please modify or remove properties in your own theme file to be what you desire.
Adjust titles, backgrounds, report page tooltips, wallpaper, and more for some or all visuals on a page or all pages.
- Area Chart
- Azure Map
- Button
- Card
- Clustered Bar Chart
- Clustered Column Chart
- Decomposition Tree
- Donut Chart
- Esri ArcGIS Map
- Filled Map
- Funnel Chart
- Gauge
- Hundred Percent Stacked Bar Chart
- Hundred Percent Stacked Column Chart
- Image
- Key Influencers
- KPI
- Line Chart
- Line and Clustered Column Chart
- Line and Stacked Column Chart
- Map
- Matrix
- Multi-row Card
- Pie Chart
- Q&A
- Ribbon Chart
- Scatter Chart
- Shape
- Shape Map
- Slicer
- Stacked Area Chart
- Stacked Bar Chart
- Stacked Column Chart
- Table
- Textbox
- Treemap
- Waterfall
It's possible to explore a Power BI Desktop file on your local computer to see the properties that are set, even if they aren't documented by Microsoft yet. Check out this great article for a guide on how to extract these properties.
For questions not answered here, you can View the FAQ.
If you have a question or find an issue, you can Create a new issue.
- one global-level theme template to help understand global-level settings.
- one template per available visual, covering all default Power BI visuals as well as many custom visuals, to help understand visual-level settings.
- pre-built color themes (You can find these in Microsoft's official themes gallery)
- Theme samples to solve specific problems such as adding outlines or hiding visual headers on every visual (You can find these samples in mattrudy/PowerBIThemeSolutions)
- JSON file generator for anyone who doesn't want to write their own JSON file (You can use the JSON Generator from PowerBI.Tips)
There are several helpful levels of automation that help this project stay valid over time.
When someone new adds an Issue or Pull Request to the project:
Link to Action | Description |
---|---|
They are greeted, thanked, and pointed to helpful links |
When a template or file is added/edited:
Link to Action | Description |
---|---|
Any hyperlinks are tested to make sure they are valid | |
Any JSON files are scanned to make sure they are valid |
Every 12 hours:
Link to Action | Description |
---|---|
Microsoft's blog feed is scanned to check for a new Power BI Monthly Update, and if there is an issue is created to check for new visuals or properties. |
Once a week:
Link to Action | Description |
---|---|
All hyperlinks on all pages are checked to make sure no links have broken |
This project is only possible thanks to the contributions of the community - below is a small set of the people who have made this possible! We're also very thankful to everyone who's written blog posts with useful samples, created issues, or suggested enhancements to this repository, or helped spread the word about this resource! Want to see your name in this list? Check out the 'How Can I Contribute' section in the Contribution Guidelines to get started!
Contribution list made with contrib.rocks.