Theme JSON: Card

[saranicole2695]

Hi! I am in the process of building a customized them with JSON. I have gotten everything but my Card formatting section to work. I have spent the last couple hours scouring through google, youTube, and Power BI Community to no avail. I find a lot of information but very little in relation to the Card visual.  I want to set the formatting of the Data Label, Title, and Border. Below is the card section of my JSON code. None of these peices affect the visuals. Any assistance would be greatly appreciated.  Thanks!

"visualStyles":{  
      "card":{  
         "*":{  
        	
			"labels": [{
				"color": { "solid": { "color": "#000000" } },
				"labelDisplayUnits": 1,
				"LabelPrecision": "0",
				"fontSize": 27,
				"fontFamily": "DIN"
				
			}],
			
			 "border": [{
				    "show": true,
				    "color": { "solid": { "color": "#30770F"}}, 
					"radius": 15
                
            }],
				
			"categoryLabels": [{
				"show" : false
			}],
			
			 "title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }]
			
         }
      }
   },

[trebgatte]

Have you looked at David's repo on this? https://github.com/deldersveld/PowerBI-ThemeTemplates/blob/master/Card.json

Thanks!

--Treb

Check out my Power BI blog posts at: https://marqueeinsights.com/tag/power-bi/

[saranicole2695]

Yes. That is where I got the code that I used from. I can copy exactly what he has there and paste it in and it still has no affect on a card in my file. It doesn't affect existing cards or any added after the theme is applied.

[dax]

Hi saranicole2696,

I test this in my environment(July 2019 desktop), I get below result when I import json by click switch theme->import theme

{
	"name": "CardTemplate",
	"visualStyles": {
		"card": {
			"*": {
				"labels": [{
					"color": { "solid": { "color": "#000000"}},
					"labelDisplayUnits": "1",
					"labelPrecision": 0,
					"fontSize": 27,
					"fontFamily": "DIN"
				}],
					
			"categoryLabels": [{
				"show" : false
			}],
				"wordWrap": [{
					"show": true
				}],
				
				   "title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }],
				   "border": [{
				    "show": true,
				    "color": { "solid": { "color": "#30770F"}}, 
					"radius": 15
                
            }]
			}
		}
	}
}

So what is your desktop version? If you close the desktop and re-open, re-import theme, will this work ?

Best Regards,
Zoe Zhi

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[saranicole2695]

Well, that is what it is supposed to look like.  I am on the newest version (October 2019). I have closed and reopened desktop and still nothing. Could it be a bug in the newest version? Is there a way to get a previous version back?

[trebgatte]

Bear in mind, that card JSON is a snippet that has to be inserted into the overall JSON structure. You can see that here: https://docs.microsoft.com/en-us/power-bi/desktop-report-themes#report-theme-json-file-format

This is why we wind up building these for our clients as the complexity is subtle. 

Hope this helps.

--Treb

Check out my Power BI blog posts at https://marqueeinsights.com/category/power-bi/

[saranicole2695]

Right, that is just the card portion of the entire file. All of the other visual types that have have specs laid out for are working perfectly.  Here is the entirety of the code.

{

"name": "CGB",

"dataColors": [ "#839A43", "#945D5D", "#DFB84C", "#4F80B8", "#631A42", "#8D8D8D", "#46639E", "#99ACC4", "#FFBC00" ],

"background":"#FFFFFF",

"foreground": "#000000",

"tableAccent":"#30770F",

"visualStyles":{  
    "clusteredColumnChart":{
		"*" :{
			"title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }]
				}
			}
		},

"visualStyles":{
	"card":{  
         "*":{  
        	
			"labels": [{
				"labelDisplayUnits": "1",
				"LabelPrecision": 0,
				"fontSize": 27,
				"fontFamily": "DIN"
				
			}],
			
			 "border": [{
				    "show": true,
				    "color": { "solid": { "color": "#30770F"}}, 
					"radius": 15
                
            }],
				
			"categoryLabels": [{
				"show" : false
			}],
			
			 "title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }]
		     }
         }
      },
   

"visualStyles":{  
      "pieChart":{  
         "*":{  
          
            "border": [{
				    "show": true,
				    "color": { "solid": { "color": "#30770F"}}, 
					"radius": 15
			}],
					
            "title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }], 
			"legend": [{
				"show": false
			}],
			
			"labels": [{
					"show": true,
					"labelStyle": "Data",
					"color": { "solid": { "color": "#000000" } },
					"labelDisplayUnits": 1,
				    "LabelPrecision": "0",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI",
					"position": "Outside"
			}]
           
         }
      }
   }	
}

[dax · Accepted solution]

Hi saranicole2695,

It seems that the "visualStyle" is duplicated in your sample, I will check your sample in my environment. In addition, you could refer to Report Theme Generator V3 , then set attribute vaue in it, then you could get json file when you click "Download".

Best Regards,
Zoe Zhi

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[saranicole2695]

Thanks for all of the feedback. I am so much closer.  All of the Card specs are now populating in Power BI when I import the JSON except for labelPrecision. Any ideas on that? I have tried all kinds of things to get it to pull something in. I have tried just using a 0 and "0". Verified the command. Tried a different one: dataLableDecimalPlaces. Tried other numbers 1, 2, 5. Nothing has seemed to work.  Any ideas?

	"card":{  
         "*":{  
        	
			"labels": [{
				"color": { "solid": { "color": "#000000"}}, 
				"labelDisplayUnits": 1,
				"LabelPrecision": "0",
				"fontSize": "25",
				"fontFamily": "Trebuchet MS"
				
			}],
			
			 "border": [{
				    "show": true,
				    "color": { "solid": { "color": "#30770F"}}, 
					"radius": 15
                
            }],
				
			"categoryLabels": [{
				"show" : false
			}],
			
			 "title": [{
				    "show": true,
				    "fontColor": { "solid": { "color": "#000000" } },
				    "background": { "solid": { "color": "#FFFFFF" } },
				    "alignment": "center",
				    "fontSize": 15,
				    "fontFamily": "Segoe UI"
				  }]
		     }
      },