Custom Report Theme JSON Property settings in Tables/Matrix

[MWinter225]

Hi,

Has anyone had any luck controling the huge list of properties in report theme announcement? 

https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-report-themes/#report-theme-json-f...

I am testing this and just trying to turn on Vertical and Horizontal Gridlines and change their default color. If I could do this, I'm thinking that I'll be in a good place to continue on customizing other properties. 

I am fairly new to working with JSON so hopefully there is something obviously wrong with this and a simple fix.  This is my simplified JSON just trying to set custom colors and then turn on horizontal and vertical grid lines and choose the default colors for them:

{  
   "name":"TestTheme",
   "dataColors":[  
      "#0069aa",
      "#4f8dc2",
      "#9ab7da",
      "#cedaec",
      "#00c762",
      "#fbe7a6",
      "#ff544a",
      "#f89a1c",
      "#545451"
   ],
   "visualStyles":{  
      "pivotTable":{  
         "*":{  
            
            "grid":[  
               {  
                  "gridVertical":true,
                  "gridVerticalColor":"#4f8dc2",
                  "gridHorizontal":true,
                  "gridHorizontalColor":"#4f8dc2"
               }
            ]
         }
      }
   }
}

What am I doing wrong?  Any Ideas @Ashish_Mathur, @Greg_Deckler, @TomMartens, @v-yulgu-msft, @Seth_C_Bauer? Calling on the big guns! 

Thanks in advance, 

Matt

[LelumPolelum]

Hi,

is there a way to adjust gridline settings for the charts i.e. gridline stroke width or color for stacked column chart? I cannot set up these settings via json using MWinter225 solution netiher mine.

EDIT: I'm also wondering if there's an option to set page background color in JSON? I don't see such a card on the Microsoft page.

Regards,

Marcin

[MWinter225]

@LelumPolelum I don't see any options in on https://docs.microsoft.com/en-us/power-bi/desktop-report-themes under valueAxis for gridlines. I also don't think that there are any controls for background color for the page. To make sure though and if you are a pro user create a support ticket and someone will be able to tell you for sure. https://powerbi.microsoft.com/en-us/support/pro/ticket/

-Matt

[MWinter225 · Accepted solution]

Hey Everyone, 

Microsoft has gotten back with me and said 

"Our product team have fixed this issue and code check-in has been done.

Product team confirmed that this fix will be available in the service in about 3 weeks and this fix will be available in December version of Power BI Desktop."

Looks like most or all of the properties that don't work now will work in the December release! ....To Be Continued...

10/25 update:

I got another response back-

" My product team confirmed that the JSON file that you have developed is correct. They have fixed bugs in Power BI Desktop which rendered properly based on the JSON file." 

looks like we can take my original example as correct as far as the properties of the "grid" card are concerned. Here's to changing more properties by JSON theme files in December! 

11/1  Update:

OK so the Microsoft team told me specifically that the only issues that will be fixed are the ones that are brought to their team via support tickets. So if you see something that doesn't work SEND IT IN! They said in order to keep track of what needs fixing they will only fix issues brought to their attention. I already sent in all the ones that don't work for my use case but that will not cover all the other JSON properties not working. Someone needs to do a giant test of all the properties and then send in a huge ticket 

12/12 Update:

The December release is out and as far as I can tell, there has been no changes as far as the JSON features working.  I reached out to the MS team to troubleshoot. hopefully its user error and I just need to change my JSON. 

Jan 2018 Update:

Apparently the JSON features I requested to be fixed WERE fixed but they weren't working the way they originally told me they would! This works for me and fulfills my requirements for my original post:

{  
   "name":"Jan 2018 Theme",
   "dataColors":[  
      "#0069aa",
      "#4f8dc2",
      "#9ab7da",
      "#cedaec",
      "#00c762",
      "#fbe7a6",
      "#ff544a",
      "#f89a1c",
      "#545451"
   ],
   "background":"#FFFFFF",
   "foreground":"#545451",
   "tableAccent":"#4f8dc2",
   "visualStyles":{  
      "*":{  
         "*":{  
            "*":[  
               {  
                  "fontFamily":"Segoe UI"
               }
            ]
         }
      },
	  "*":{  
            "*":{
               "grid":[
                  {  
                     "outlineColor":{"solid":{"color":"#4f8dc2"}},
                     "gridVertical":true,
                     "gridVerticalColor":{"solid":{"color":"#4f8dc2"}},
                     "gridHorizontal":true,
                     "gridHorizontalColor":{"solid":{"color":"#4f8dc2"}}
                  }
               ],
               "columnHeaders":[  
                  {  
                     "fontColor":{"solid":{"color":"#ffffff"}},
                     "backColor":{"solid":{"color":"#0069aa"}},
                     "fontFamily":"Segoe UI"
                  }
               ],
               "values":[  
                  {  
                     "backColorSecondary":{"solid":{"color":"#cedaec"}}
                  }
               ]
            }
         }
   }
}

[UXBrian]

Pivot Table:

"pivotTable": {
"*": {
"stylePreset":[{
"name":"AlternatingRows"
}],
"grid": [{
"gridVertical": false,
"gridVerticalColor": { "solid": { "color": "#E6E6E6"}},
"gridVerticalWeight": 1,
"gridHorizontal": true,
"gridHorizontalColor": { "solid": { "color": "#E6E6E6"}},
"gridHorizontalWeight": 1,
"rowPadding": 1,
"outlineColor": { "solid": { "color": "#E6E6E6"}},
"outlineWeight": 2,
"textSize": 10,
"imageHeight": 75
}],
"columnHeaders": [{
"fontColor": { "solid": { "color": "#FFFFFF"}},
"backColor": { "solid": { "color": "#003D6A"}},
"outline": "Bottom",
"autoSizeColumnWidth": true,
"fontFamily": "Segoe UI",
"fontSize": 11,
"alignment": "Center",
"titleAlignment": "Left",
"urlIcon": false,
"wordWrap": false,
"bold": false,
"italic": false,
"underline": false
}],
"rowHeaders": [{
"fontColor": { "solid": { "color": "#000000"}},
"backColor": { "solid": { "color": "#FFFFFF"}},
"outline": "Right",
"stepped": true,
"steppedLayoutIndentation": 20,
"urlIcon": false,
"wordWrap": true,
"fontFamily": "Segoe UI",
"fontSize": 11,
"alignment": "Auto",
"bold": false,
"italic": false,
"underline": false,
"showExpandCollapseButtons":true,
"expandCollapseButtonsColor": { "solid": { "color": "#000000"}},
"expandCollapseButtonsSize": 10
}],
"values": [{
"fontColorPrimary": { "solid": { "color": "#000000"}},
"backColorPrimary": { "solid": { "color": "#FFFFFF"}},
"fontColorSecondary": { "solid": { "color": "#000000"}},
"backColorSecondary": { "solid": { "color": "#FFFFFF"}},
"bandedRowHeaders": true,
"valuesOnRow": false,
"outline": "None",
"urlIcon": false,
"wordWrap": true,
"fontFamily": "Segoe UI",
"fontSize": 10,
"bold": false,
"italic": false,
"underline": false
}],
"subTotals": [{
"rowSubtotals": true,
"columnSubtotals": true,
"fontColor": { "solid": { "color": "#000000"}},
"fontFamily": "Segoe UI",
"backColor": { "solid": { "color": "#FFFFFF"}},
"fontSize": 10,
"applyToHeaders": false,
"rowSubtotalsPosition": "Top",
"perRowLevel": false,
"perColumnLevel": false
}],
"total": [{
"fontColor": { "solid": { "color": "#000000"}},
"fontFamily": "Segoe UI Bold",
"backColor": { "solid": { "color": "#CCCCCC"}},
"applyToHeaders": true,
"fontSize": 10
}]
}
}

If you want a goo resource for templates for all the various charts and elements check out: https://github.com/deldersveld/PowerBI-ThemeTemplates

Most everything you need is in there.  There are some additional properties that are not highlighted and you have to dig for the name for any custom or imported element.

[ruthpozuelo]

ok, so these doesnt work yet for pivotTable?

"values": [{
"fontColorPrimary":"#203461",
"backColorPrimary":"#203461",
"fontColorSecondary":"#203461",
"backColorSecondary":"#f3fafe",
}],

Not a smooth process...

/Ruth

[ruthpozuelo]

ok, so these doesnt work yet for pivotTable?

"values": [{
"fontColorPrimary":"#203461",
"backColorPrimary":"#203461",
"fontColorSecondary":"#203461",
"backColorSecondary":"#f3fafe",
}],

Not a smooth process...

/Ruth

[KellyDittmar]

Fantastic!! Thanks for following up with them & with us!

[Marlou1989]

Hi,

Here is an example of how I used the json report theming so far.

Maybe this might help someone out here!

A note: All of it works, except the pivotTable (matrix).

{
    "name": "TestMarlou", 
    "dataColors":["#074650", "#009292", "#fe6db6", "#feb5da", "#480091", "#b66dff", "#b5dafe", "#6db6ff", "#914800", "#23fd23"],
    "background":"#FFFFFF",
    "foreground": "#074650",
    "tableAccent": "#fe6db6", 
    "visualStyles": 
{
        "*": {
            "*": {
                "*": [
                    {
                        "responsive": true,
                        "wordWrap": true,
                        "cardTitle": true,
                        "fontFamily": "Trebuchet MS",
                        "fontSize": 10
                    }
                ],
                "cardTitle": [
                    {
                        "show": true
                    }
                ],
                "wordWrap": [
                    {
                        "show": true
                    }
                ],
                "labels": [
                    {
                        "show": true,
                        "labelOrientation": "horizontal",
                        "fontSize": 10,
                        "labelDensity": 100,
                        "labelDisplayUnits": 1
                    }
                ],
                "categoryLabels": [
                    {
                        "show": false

                    }
                ],
                "legend": [
                    {
                        "show": true,
                        "position": "BottomCenter",
                        "fontSize": 8
                    }
                ]
            }
        },
        "card": {
            "*": {
                "labels": [
                    {
                        "fontSize": 14,
                        "color": { "solid": { "color": "#ff0000" } }
                    }
                ],
                "categoryLabels": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "multiRowCard": {
            "*": {
                "labels": [
                    {
                        "fontSize": 18
                    }
                ],
                "categoryLabels": [
                    {
                        "show": true,
                        "fontSize": 10
                    }
                ],
                "cardTitle": [
                    {
                        "fontSize": 14
                    }
                ],
                "card": [
                    {
                        "barShow": false,
                        "cardBackground": { "solid": { "color": "#ff0000" } },
                        "outline": "Frame"
                    }
                ]
            }
        },
        "clusteredBarChart": {
            "*": {
                "labels": [
                    {
                        "fontSize": 10
                    }
                ],
                "categoryLabels": [
                    {
                        "show": true
                    }
                ],
                "categoryAxis": [
                    {
                        "axisType": "Categorical"
                    }
                ]
            }
        },
        "areaChart": {
            "*": {
                "labels": [
                    {
                        "show": false
                    }
                ],
                "dataLabels": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "lineChart": {
            "*": {
                "labels": [
                    {
                        "show": false
                    }
                ],
                "dataLabels": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "barChart": {
            "*": {
                "labels": [
                    {
                        "show": true
                    }
                ],
                "dataLabels": [
                    {
                        "show": true
                    }
                ],
                "dataPoint": [
                    {
                        "defaultCategoryColor": { "solid": { "color": "#ff0000" } }

                    }
                ],
                "categoryAxis": [
                    {
                        "axisType": "Categorical"
                    }
                ]
            }
        },
        "slicer": {
            "*": {
                "selection": [
                    {
                        "singleSelect": false,
                        "selectAllCheckboxEnabled": true
                    }
                ],
                "header": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "pivotTable": {
            "*": {
                "grid": [
                    {
                        "outlineColor": { "solid": { "color": "#ff0000" } }
                    }
                ],
                "subTotals": [
                    {
                        "columnSubtotals": false

                    }
                ],
                "columnHeaders": [ 
                    {
                        "urlIcon": true
                        }
                    ],
                "rowHeaders": [ 
                    {
                        "urlIcon": true
                        }
                    ]
            }
        },
        "basicShape": {
            "*": {
                "fill": [
                    {
                        "show": false
                    }
                ],
                "line": [
                    {
                        "lineColor": { "solid": { "color": "#F2F2F2" } }
                    }
                ]
            }
        },
        "waterfallChart": {
            "*": {
                "sentimentColors": [
                    {
                        "increaseFill": { "solid": { "color": "#98FB98" } },
                        "decreaseFill": { "solid": { "color": "#ff0000" } },
                        "totalFill": { "solid": { "color": "#657C91" } },
                        "otherFill": { "solid": { "color": "#DF8639" } }
                    }
                ],
                "labels": [

                    {
                        "labelOrientation": "vertical",
                        "labelPosition": "InsideEnd"
                    }

                ]
            }
        },
        "kpi": {
            "*": {
                "status": [
                    {
                        "goodColor": { "solid": { "color": "#98FB98" } },
                        "badColor": { "solid": { "color": "#ff0000" } },
                        "neutralColor": { "solid": { "color": "#DF8639" } }
                    }
                ]
            }
        }
    }
    }

If anyone figured the pivotTable out, please let me know.

Thank you in advance,

Marlou

[ctappan]

Hey all,

I still can't speak to what Power BI honors and doesn't in the .json files, but I've done a solid update to the theme generator tool I'd linked to before. May be useful to someone: http://community.powerbi.com/t5/Desktop/Power-BI-Theme-Generator/m-p/288180#M126780

[ctappan]

I was wrong--it was just your json. get rid of the double line break before "grid" and it works.

[ctappan]

I was wrong again.

Fixing the json allowed the theme to be imported without error, but it doesn't do anything other than change the color palette.

The link I referenced earlier seems to have effect on the column chart but not the bar chart; I'm able to affect the slicer but can't get the grid properties you referenced to work.

Some of the announcement page almost makes it sound like it's still being developed, but it's hard for me to imagine that much documentation before it went live...

[MWinter225]

Thanks for your reply. I agree, I wish the documentation was a bit more thorough. Hoping to find an answer to this here!

[KellyDittmar]

I just arrived hopeful for brilliance related to this topic... but alas, I'm with you.

The only thing that seems to work is the color setup. None of the other formatting in the visualStyles area has any impact on my reports. 

The thing I thought to check was the version of Power BI desktop I'm using - which is sept, so this should work... but that's burned me before! 

Kelly

[ctappan]

I can relate--when my email says there's a response I get excited, only to be disappointed they're asking questions too.

As Mwinter noted a minute ago, something like the code below will change general settings. I'm fairly confident that I successfully set some card-level properties as well, but most failed.

{
	"name": "myTheme",
	"dataColors": ["#E2A227", "#593224", "#2F9570", "#BA692D", "#BC9934", "#912731", "#717430", "#89431E"],
	"background": "#FFFFFF",
	"foreground": "#89431E",
	"tableAccent": "#89431E",
	"visualStyles": {
		"*": {
			"*": {
				"*": [
					{
						"fontSize": 9,
						"fontFamily": "Trebuchet MS",
						"color": {
							"solid": {
								"color": "#89431E"
							}
						}
					}
				]
			}
		}
	}
}

[Yanant1020]

When does color need to be further broken down as you have in your example? @ctappan

This is not changing color for me and I am unsure why. I read in earlier posts that it may just be broken though.

Anthony

[MWinter225]

@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!

[ruthpozuelo]

I published the resource for creating JSON files for Power BI themes. 

@MWinter225, if you manage to go through the properties that do not work, let me know and I will add them to the template. (Will of course give you credit for it :).

[MagnusRosenPBI]

I see a few mentions of the cardTitle property in this thread. I have tried to get it to work but cannot get it to influence my report. If anyone has managed to achieve this, please let me know.

Cross-posting to my question thread link

 EDIT - Found the answer in another thread link, apparentely it is not possible to use a custom report theme to control the title section settings.

[ruthpozuelo]

Thanks @MWinter225!

I have a new resource coming out for working with the JSON files that hopefully will make our lifes easier. I will share it once it has been released publicly.

/Ruth

[Yanant1020]

Thanks for all the work! I will try the further breakdown.

Anthony

Update: Yes, changing color references to a complete breakdown works more often than just using color for me

i.e. "gridlineVerticalColor":{"solid":{"color":"#000000"}} works better than "gridlineVerticalColor": "#000000"