Custom Report Theme JSON Property settings in Tables/Matrix

I will admit the issues you are stuggling through are difficult.  The documenation is not very clear on how to customize each visual.  I will state this, which might help you get down to a lower editing level within the Power BI Report Themes.

1.  The general settings for all visuals starts with the following:

visualStyles, then three nested "*", then the properties you want to change.  This is noted in the top section of the JSON below.  When these properties are set, they are set for all visuals globally.  FontSize means you set all visuals where the fontSize property is located to 12.  

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontSize": 12,
                        "fontFamily": "Arial Black"
                    }
                ]
            }
        },
        "barChart": {
            "*": {
                "categoryAxis": [
                    {
                        "show": true,
                        "titleText": "MIke"
                    }
                ]
            }
        }
    }
}

In each visuals there are many different font sizes, See below the sample of the Font Sizes for the bar Chart.

- See in here we have fontSize for the Legend, and Labels, but also have titleFontSize for CategoryAxis (x-axis) and valueAxis (y-axis).  

{
    "name": "My Theme",
    "visualStyles": {
        "barChart": {
            "*": {
                "legend": [
                    {
                        "showTitle": true,
                        "fontSize": 12
                    }
                ],
                "categoryAxis": [
                    {
                        "show": true,
                        "fontSize": 13,
                        "showAxisTitle": true,
                        "titleFontSize": 14
                    }
                ],
                "valueAxis": [
                    {
                        "show": true,
                        "fontSize": 15,
                        "showAxisTitle": true,
                        "titleFontSize": 16
                    }
                ],
                "labels": [
                    {
                        "show": true,
                        "fontSize": 17
                    }
                ]
            }
        }
    }
}

If you wanted to to change all fonts for all visuals you will need to produce something like the following:

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontSize": 12,
                        "titleFontSize": 14
                    }
                ]
            }
        }
    }
}

This will change all properties in the Legend or x and y Axis - at the global level... Note there are three *'s in the front.

Another side note:

When you modify the Global properties, and then set the same property at the local visual level, the Local visual level property setting with override any global settings.  

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontSize": 12
                    }
                ]
            }
        },
        "barChart": {
            "*": {
                "legend": [
                    {
                        "showTitle": true,
                        "fontSize": 14
                    }
                ]
            }
        },
        "columnChart": {
            "*": {
                "labels": [
                    {
                        "fontSize": 16
                    }
                ]
            }
        }
    }
}

In this case the global setting would be any visual that had a fontSize property in any sub grouping, would be set to 12.  In only the Bar Chart Visual would the fontSize property be 14 for the legend, and the Column Chart would have labels with the fontSize of 16.

The defined properties for each visual will override the global properties defined in the top section of JSON.  

I hope that helps.  I am working as fast as I can to update the Report Theme tool to increase it's flexibility and allow for more changes per visual and at a global level. 

Thanks,

Mike Carlo

www.PowerBI.Tips

Report Theme Generator

ruthpozuelo Yes I'm almost certain that those are not functional yet

Yanant1020 I don't really know. But I did get feedback on the gridVerticalColor/gridHorizontalColor and they said that does need to be broken out. they said:

Do not use:

“gridVerticalColor”: “#FFF”

Use:

“gridlineVerticalColor”: { "solid": { "color": "#00FF00"}}

Their response is a little confusing because the wording also changed from gridVerticalColor to gridlineVerticalColor so test out both spellings when the december release happens.  Microsoft Power BI team assured me that the following fixes would be available for control of the custom themes using JSON theme files for the December release for pivotTable:

1. grid
   1. gridVertical
   2. gridVerticalColor
   3. gridHorizontal
   4. gridHorizontalColor
2. columnHeaders
   1. fontColor
   2. backColor
3. values
   1. backColorSecondary

I think thats it because that was my requirements. Send in your ticket to them if you want something else fixed. https://powerbi.microsoft.com/en-us/support/pro/

It's on my list of to do items to go through all the JSON properties and test it but I haven't had time!