Power BI Theming – Chart Style Controls

With the September 2017 release of Power BI Desktop several goodies have been added to the PBI Desktop feature set. One of the mostly awaited is the Drillthrough feature which will not be the topic of this blog post. Another announcement in the changelog got my attention: Theming preview update – chart style controls!

For me personally, this functionality is a huge step forward in bringing/integrating a Corporate Identity (CI) functionality into the Power BI universe. With the first round of theming support back in March 2017, we got support for defining our custom reporting/data colors. The default Power BI color scheme always reminds me of the default colors for excel charts.. hmm.. maybe not the best choices at all! 🙂

If you apply a custom report theme with your favorite colors you’ll get something like this:

pbi_theming_01

 

Chart Style Controls

The first version of Theming support allowed you to specify up to 10 data colors plus background, foreground and a tableAccent color.

{
“name”: “Wolfgang Theme”,
    “dataColors”: [
        “#6876ff”,
        “#a9d1f4”,
        “#63bb80”,
        “#783b3c”,
        “#000831”,
        “#141256”,
        “#d0d0d7”
    ],
    “background”: “#f2f2f3”,
    “foreground”: “#575760”,
    “tableAccent”: “#aba9f4”
}

With the September PBI Desktop release, we are now able to control more settings of chart / visual controls within the report theme.

To achieve this the theme JSON file needs to be extended with the visualStyles directive. This directive allows the theme designer to control the style of a specific visual OR if you want to generally set a setting you can use “*” to set a default value. The structure of the visualStyles directive is defined as follows:

pbi_theming_02

Power BI Theming – Control Styles definition layout

The theme documentation provides a list of available visual names, cardNames and property names.

At this point some further explanation is needed for the hierarchy within the theme definition:

  • visualName corresponds to available PBI visuals like treeMap, card, columnChart,…
  • styleName (as of today I am not sure whereto this corresponds to PBI Desktop language.. :-)) maybe someone can further explain this to me
  • cardName corresponds to the formatting card/option within Power BI Desktop. Attention here: the name in the theme JSON file is defined different than the User Interface name + do not forget case-sensitivity! (i.e.  general => General; categoryAxis => X-Axis, valueAxis => Y-Axis, ..). See the documentation for the rest of the mapping.
pbi_theming_03

PBI Desktop – formatting options and their relationship to theming JSON.

  • propertyName and propertyValue defines the property itself plus the value that should be used after the theme is applied. For some of the properties there are enumerations of allowed values defined. Also for this case the documentation defines the allowed values:
pbi_theming_04.jpg

Power BI Theming – excerpt of available propertyValue enumerations!

But now – let’s try it!

For my first example I wanted to define a common font-size plus font-family. In order to achieve this I added the new JSON directive for visualStyles and defined a default for all visuals ,styleNames and cardNames (by using “*”). Within there I used the porperty Names fontSize and fontFamily to define the common font attributes. See the JSON excerpt:

pbi_theming_05.jpg

Defining common fonts for PBI reports

The initial PBI sample report looked like this:

pbi_theming_06

When the new theme is applied (including the common font definition) the report looks like. As you can see the common font size and font family is changed. What I did not managed for my first try is to also change the title font.. but I work on that.

pbi_theming_07

 

The overall theme (including common font definition):

{
    "name": "Wolfgang Theme",
    "dataColors": [
        "#6876ff",
        "#a9d1f4",
        "#63bb80",
        "#783b3c",
        "#000831",
        "#141256",
        "#d0d0d7"
    ],
    "background": "#f2f2f3",
    "foreground": "#575760",
    "tableAccent": "#aba9f4",
    "visualStyles":{
        "*":{
            "*":{
                "*":[{
                    "fontSize":14,
                    "fontFamily":"Courier New"
                }]
            }
        }
     }
}

Open questions:

  • Where do we find the right property names plus allowed values etc. for all the different properties?
  • Why is the fontfamily not applied to the titles?

With that – the custom control styles feature looks veeeeeery promising. I hope there will be an easy way in the future to get to all the required property information for the report themes.

Corporate Identity in Power BI Reports .. here we come!

Have fun and Happy Power BI-ing,

Wolfgang

The documentation for creating report theme files can be found here: https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-report-themes

About wolfgang

Data Platform enthusiast
This entry was posted in PowerBI. Bookmark the permalink.

3 Responses to Power BI Theming – Chart Style Controls

  1. Pingback: Chart Style Controls – Curated SQL

  2. domaufreisen says:

    Hi Wolfgang. Did you figure out how to enable format options such as “data labels”? Cheers, Dom

  3. Lomerchey says:

    Excellent and very useful, Thank you.
    NB: I was also puzzled by the visualStyle bit but I finally found out that it matches the “Style” property available with some visual (see “Matrix Style” format card for example). You can replace the asterisk at this level with one of the predefined style (Minimal, Bold Header, alternating row …) to specify that what follows must be applied for the selected style only.
    Cheers,
    Laurent

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s