JSON issue for new card visual

[SDittmannFleet]

I have the following JSON code for the NEW card visual. It is applying most of what I'm specifying, but it ignores "padding" and it ignores the color specification for the card value. What do I need to change to fix this? 

"cardVisual": {
            "*": {
                "labels": [
                    {
                        "color": {
                            "solid": {
                                "color": "#666666"
                            }
                        },
                        "position": "BelowValue"
                    }
                ],
                "categoryLabels": [
                    {
                        "color": {
                            "solid": {
                                "color": "#666666"
                            }
                        }
                    }
                ],
                "values": [
                    {
                        "color": {
                            "solid": {
                                "color": "#666666"
                            }
                        },
                        "horizontalAlignment": "Center"
                    }
                ],
                "padding": [
                    {
                        "top": 0,
                        "left": 0,
                        "right": 0,
                        "bottom": 0
                    }
                ],
                "cards": [
                    {
                        "fill": {
                            "show": false
                        }
                    }
                ]
            }
        }

[johnbasha33]

@SDittmannFleet 

To troubleshoot why your JSON settings for the NEW card visual in Power BI are not applying the `padding` and the color specification for the card value, we need to ensure that the JSON structure and syntax are correct based on Power BI's requirements.

Here are a few adjustments and considerations:

### 1. JSON Structure and Scope

- Ensure that the JSON structure is correctly nested under `cardVisual` and applies to the correct scope (`*` for all visuals).
- Check if there are any conflicting settings or overriding rules in other parts of your JSON theme file that might be affecting these properties.

### 2. Padding

The `padding` property should be specified correctly. Your current JSON snippet for padding looks correct, but ensure it is placed correctly within the hierarchy and that there are no conflicting settings:

```json
"padding": [
{
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
],
```

### 3. Color Specification

Ensure that the color specification for labels, category labels, and values are correctly structured and applied. Your current structure for color seems correct, but again, check for conflicts or overrides:

```json
"labels": [
{
"color": {
"solid": {
"color": "#666666"
}
},
"position": "BelowValue"
}
],
"categoryLabels": [
{
"color": {
"solid": {
"color": "#666666"
}
}
}
],
"values": [
{
"color": {
"solid": {
"color": "#666666"
}
},
"horizontalAlignment": "Center"
}
],
```

### 4. Testing and Validation

After making adjustments, save your JSON theme file and refresh your Power BI report to see if the changes are applied correctly. Sometimes, changes might not take effect immediately due to caching or other factors, so refreshing the visuals or reopening Power BI can help.

### Example Adjusted JSON

Here’s a consolidated version based on your provided snippet:

```json
"cardVisual": {
"*": {
"labels": [
{
"color": {
"solid": {
"color": "#666666"
}
},
"position": "BelowValue"
}
],
"categoryLabels": [
{
"color": {
"solid": {
"color": "#666666"
}
}
}
],
"values": [
{
"color": {
"solid": {
"color": "#666666"
}
},
"horizontalAlignment": "Center"
}
],
"padding": [
{
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
],
"cards": [
{
"fill": {
"show": false
}
}
]
}
}
```

### Final Steps

- Verify that your Power BI theme file is correctly referenced and applied in your report settings.
- Double-check the application of the JSON settings in the Power BI desktop or service environment.

By ensuring these aspects, you should be able to fix the issues with `padding` and color specification for the card value in your NEW card visual in Power BI. If problems persist, consider reviewing Power BI's documentation or seeking support from Microsoft's Power BI community forums for further assistance.

Did I answer your question? Mark my post as a solution! Appreciate your Kudos !!

[Cardhu2003]

@SDittmannFleet 

I have struggled for several days with an equal problem. Then I found the solution.

For some elements you have to define:
"$id": "default"

After these changes my JSON worked. Hope this works for you too.

"cardVisual": {
      "*": {
        "padding": [
          {
            "top": 0,
            "left": 0,
            "right": 0,
            "bottom": 0
          }
        ],
        "value": [
          {
            "fontSize": 18,
            "fontColor":{
              "solid": {
                "color": "#FFFFFF"
              }
            },
            "horizontalAlignment": "center",
            "$id": "default"
          }
        ],
        "label": [
          {
            "fontSize": 10,
            "fontColor":{
              "solid": {
                "color": "#FFFFFF"
              }
            },            
            "horizontalAlignment": "center",
            "position": "belowValue",
            "$id": "default"
          }
        ],
        "fillCustom": [
          {
            "show": true,
            "fillColor":{
              "solid": {
                "color": "#4c9896"
              }
            },
            "$id": "default"
          }
        ]
      }
    }

[blorbert]

Great solution!  Wanting to add onto this as its another thing I was struggling with and just discovered.  You can change the default shape of the cards by adding this into the code:

        "shapeCustomRectangle": [{

                    "$id": "default",

                    "tileShape": "rectangleRounded",

                    "rectangleRoundedCurve": 20

                }],

[blorbert]

Great solution!  Wanting to add onto this as its another thing I was struggling with and just discovered.  You can change the default shape of the cards by adding this into the code:

        "shapeCustomRectangle": [{

                    "$id": "default",

                    "tileShape": "rectangleRounded",

                    "rectangleRoundedCurve": 20

                }],