Forum Discussion
Custom Report Theme JSON Property settings in Tables/Matrix
Hi,
Has anyone had any luck controling the huge list of properties in report theme announcement?
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, Anonymous? Calling on the big guns!
Thanks in advance,
Matt
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 :smileylol:
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. :smileymad:
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"}} } ] } } } }
32 Replies
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
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
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 :smileylol:
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. :smileymad:
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"}} } ] } } } }Fantastic!! Thanks for following up with them & with us!
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.ok, so these doesnt work yet for pivotTable?
"values": [{
"fontColorPrimary":"#203461",
"backColorPrimary":"#203461",
"fontColorSecondary":"#203461",
"backColorSecondary":"#f3fafe",
}],Not a smooth process...
/Ruth
This might help get you going, though I'm newish to json too and haven't been able to run with it like I'd like to:
https://powerbi.tips/tools/report-theme-generator-v3/
As another start, I think maybe there should be one more layer of "*" in your json before "pivotTable":
{ "name":"TestTheme", "dataColors":[ "#0069aa", "#4f8dc2", "#9ab7da", "#cedaec", "#00c762", "#fbe7a6", "#ff544a", "#f89a1c", "#545451" ], "visualStyles":{ "*":{ "pivotTable":{ "*":{ "grid":[ { "gridVertical":true, "gridVerticalColor":"#4f8dc2", "gridHorizontal":true, "gridHorizontalColor":"#4f8dc2" } ] } } } } }This might help get you going, though I'm newish to json too and haven't been able to run with it like I'd like to:
https://powerbi.tips/tools/report-theme-generator-v3/
As another start, I think maybe there should be one more layer of "*" in your json before "pivotTable":
{ "name":"TestTheme", "dataColors":[ "#0069aa", "#4f8dc2", "#9ab7da", "#cedaec", "#00c762", "#fbe7a6", "#ff544a", "#f89a1c", "#545451" ], "visualStyles":{ "*":{ "pivotTable":{ "*":{ "grid":[ { "gridVertical":true, "gridVerticalColor":"#4f8dc2", "gridHorizontal":true, "gridHorizontalColor":"#4f8dc2" } ] } } } } }I was wrong--it was just your json. get rid of the double line break before "grid" and it works.
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...
Thanks for your reply. I agree, I wish the documentation was a bit more thorough. Hoping to find an answer to this here!
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
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
