Advanced Slicer Visual Theme Issue

[CountMcCracker]

Hello, 

I’m working on standardizing Power BI themes across the organization and recently explored the Advanced Slicer Visual schema on GitHub. However, I’m encountering an issue with changing the default shape from a rectangle to a rounded rectangle. According to the schema, the configuration seems correct, but when I upload the theme, the slicer doesn't update as expected. I’m using the new tile slicer in Power BI, and here’s the snippet from the schema I’m working with:

"advancedSlicerVisual": {
      "*": {
             "shapeCustomRectangle": [
            {
               "tileShape": "rectangleRoundedCurve",
              "rectangleRoundedCurve": 16
             }
          ]
      }
}

[LovelyGoat]

To be complete. The visual has currently (feb-2026) to RoundedRectangle shapes:

"tileShape": "rectangleRoundedByPixel" > rounded in XY pixels

"tileShape": "rectangleRounded"  > rounded in %

example code:

"advancedSlicerVisual": {
			"*": {
				"value": [
					{
						"$id": "default",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "selection:selected",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "interaction:hover",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "interaction:press",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"show": true
					}
				],
				"outline": [
					{
						"$id": "default",
						"lineColor": {
							"solid": {
								"color": "#FFFFFF"
							}
						},
						"transparency": 30
					},
					{
						"show": false
					}
				],
				"fillCustom": [
					{
						"$id": "default",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"$id": "selection:selected",
						"fillColor": {
							"solid": {
								"color": "#E79D16"
							}
						}
					},
					{
						"$id": "interaction:hover",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"$id": "interaction:press",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"show": true
					}
				],
				"background": [
					{
						"show": true,
						"color": {
							"solid": {
								"color": "#FFFFFF"
							}
						}
					}
				],
				"visualTooltip": [
					{
						"show": false
					}
				],
				"shapeCustomRectangle": [
					{
						"$id": "default",
						"tileShape": "rectangleRoundedByPixel",
						"rectangleRoundedCurve": 10
					}
				],
				"subTitle": [
					{
						"show": false
					}
				],
				"Title": [
					{
						"show": false
					}
				]
			}
		}

[gaurav2141]

Hey , I am facing the issue in AdvanceSlicerVisual 
While we select on the button I want the background should be #FEB9AC and font color #000000 but currently it is catching the default font color i.e white which should be Black even while selection. I have used black font hex in my code still I am facing the issue please find the below code and

let me know what can be done also

please suggest how can I change the border of the tile color as well. 

CODE:

 "value": [

          {

            "$id": "default",

            "fontSize": 9,

            "fontFamily": "Arial",

            "fontColor": {

              "solid": {

                "color": "#000000"  

              }

            }

          },

          {

            "$id": "selected",

            "fontSize": 9,

            "fontColor": {

              "solid": {

                "color": "#000000"  

              }

            }

          }

        ]

      ,

"fillCustom": [

          {

            "$id": "hover",

            "fillColor": {

              "solid": {

                "color": "#F3F2F1"

              }

            }

          },

          {

            "$id": "selected",

            "fillColor": {

              "solid": {

                "color": "#FEB9AC"

              }

            },

            "transparency": 0

          },

          {

            "show": true

          }

        ],

"border": [

          {

            "color": {

              "solid": {

                "color": "#E6E6E6"

              }

            },

            "show": false,

            "radius": 6

          }

        ]

[Anonymous]

Hi, @CountMcCracker 

Have you solved your problem? If so, can you share your solution here and mark the correct answer as a standard answer to help other members find it faster? Thank you very much for your kind cooperation!

Best Regards

Yongkang Hua

[OwenAuger · Accepted solution]

Hi @CountMcCracker 

I happened to be reading another thread here recently, and it looks like a similar issue.

It appears that this property needs to be included

"$id": "default"

which specifies that the rounded corners apply by "default" for all states.

Also, I believe it should be:

"tileShape": "rectangleRounded"

The full JSON snippet would be:

"advancedSlicerVisual": {
  "*": {
	"shapeCustomRectangle": [
	  {
		"$id": "default",
		"tileShape": "rectangleRounded",
		"rectangleRoundedCurve": 16
	  }
	]
  }
}

Does this work for you? Let me know if I've misunderstood something.

I haven't completely trawled through the Report Theme JSON Schema to justify this yet but it appears to work.

[CountMcCracker]

This worked! Thank you!