Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

'No Fill' Color Option Not Working For Visual Title Background

When selecting the 'No Fill' option for the visual title background, it gives the default colour as defined in the theme file, as opposed to not having any fill colour. 

 

Therefore once you have defined a fill colour in your theme file, it is impossible to have a fully transparent background for any visual title in your report.

 

Status: New
Comments
v-qiuyu-msft
Community Support

Hi @Trebor

 

Which visual did you mean? Please provide a custom theme json file for us to test the issue. 

 

Best Regards,
Qiuyun Yu

Trebor
Advocate I

Hi Qiuyun,

 

Issue is across different visuals, including the Card.

 

Here is the a custom theme:

 

{ 
   "name":"Theme",
   "dataColors":[ 
      "#009900",
      "#99CC00",
      "#FFE600",
      "#FF6600",
      "#FF0000",
      "#009EE0",
      "#4473C5",
      "#7030A0"
   ],
   "good":"#009900",
   "neutral":"#33B1E6",
   "bad":"#FF6666",
   "visualStyles":{ 
      "*":{ 
         "*":{ 
            "categoryAxis":[ 
               { 
                  "fontSize":8,
                  "titleFontSize":8,
                  "titleFontFamily":"Segoe UI"
               }
            ],
            "valueAxis":[ 
               { 
                  "fontSize":8,
                  "titleFontSize":8,
                  "titleFontFamily":"Segoe UI"
               }
            ],
            "border":[ 
               { 
                  "color":{ 
                     "solid":{ 
                        "color":"#CCCCCC"
                     }
                  },
                  "show":true
               }
            ],
            "title":[ 
               { 
                  "show":true,
                  "background":{ 
                     "solid":{ 
                        "color":"#CCCCCC"
                     }
                  },
                  "fontFamily":"Segoe UI",
                  "fontSize":13

               }
            ],
            "legend":[ 
               { 
                  "show":true,
                  "position":"BottomCenter",
                  "showTitle":false,
                  "fontSize":9
               }
            ],
            "outspacePane":[ 
               { 
                  "backgroundColor":{ 
                     "solid":{ 
                        "color":"#F3F2F1"
                     }
                  }
               }
            ],
            "filterCard":[ 
               { 
                  "$id":"Applied",
                  "backgroundColor":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "transparency":50,
                  "borderColor": { 
                     "solid": { 
                        "color": "#B1B1B1" 
                     } 
                  }
               }
            ]
         }
      },
      "textbox":{ 
         "*":{ 
            "border":[ 
               { 
                  "show":false
               }
            ],
            "title":[ 
               { 
                  "show":false
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "basicShape":{ 
         "*":{ 
            "border":[ 
               { 
                  "show":false
               }
            ],
            "title":[ 
               { 
                  "show":false
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "actionButton":{ 
         "*":{ 
            "border":[ 
               { 
                  "show":false
               }
            ],
            "title":[ 
               { 
                  "show":false
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "image":{ 
         "*":{ 
            "border":[ 
               { 
                  "show":false
               }
            ],
            "title":[ 
               { 
                  "show":false
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "lineChart":{ 
         "*":{ 
            "lineStyles":[ 
               { 
                  "strokeWidth":2
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "areaChart":{ 
         "*":{ 
            "lineStyles":[ 
               { 
                  "strokeWidth":1
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "stackedAreaChart":{ 
         "*":{ 
            "lineStyles":[ 
               { 
                  "strokeWidth":1
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "lineStackedColumnComboChart":{ 
         "*":{ 
            "lineStyles":[ 
               { 
                  "strokeWidth":2
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "lineClusteredColumnComboChart":{ 
         "*":{ 
            "lineStyles":[ 
               { 
                  "strokeWidth":2
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "scatterChart":{ 
         "*":{ 
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "donutChart":{ 
         "*":{ 
            "slices":[ 
               { 
                  "innerRadiusRatio":75
               }
            ]
         }
      },
      "map":{ 
         "*":{ 
            "mapControls":[ 
               { 
                  "autoZoom":true
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "filledMap":{ 
         "*":{ 
            "mapControls":[ 
               { 
                  "autoZoom":true
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "shapeMap":{ 
         "*":{ 
            "zoom":[ 
               { 
                  "autoZoom":true,
                  "selectionZoom":true,
                  "manualZoom":true
               }
            ],
            "labels":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "gauge":{ 
         "*":{ 
            "calloutValue":[ 
               { 
                  "show":true,
                  "labelPrecision":1
               }
            ],
            "labels":[ 
               { 
                  "labelPrecision":1
               }
            ],
            "target":[ 
               { 
                  "show":true,
                  "labelPrecision":1
               }
            ]
         }
      },
      "card":{ 
         "*":{ 
            "labels":[ 
               { 
                  "fontSize":19,
                  "fontFamily":"Segoe UI Light"
               }
            ],
            "categoryLabels":[ 
               { 
                  "fontSize":8,
                  "fontFamily":"Segoe UI"
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ],
            "border":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "slicer":{ 
         "*":{ 
            "items":[ 
               { 
                  "background":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  }
               }
            ],
            "background":[ 
               { 
                  "show":false
               }
            ],
            "header": [
               {
					"textSize": 9,
					"fontFamily": "Segoe UI"
               }
            ],
            "border":[ 
               { 
                  "show":false
               }
            ]
         }
      },
      "tableEx":{ 
         "*":{ 
            "grid":[ 
               { 
                  "gridVertical":false,
                  "gridHorizontal":true,
                  "gridHorizontalColor":{ 
                     "solid":{ 
                        "color":"#E6E6E6"
                     }
                  },
                  "gridHorizontalWeight":2,
                  "rowPadding":3,
                  "outlineColor":{ 
                     "solid":{ 
                        "color":"#E6E6E6"
                     }
                  },
                  "outlineWeight":2,
                  "textSize":10
               }
            ],
            "values":[ 
               { 
                  "urlIcon":true,
                  "wordWrap":true
               }
            ],
            "total":[ 
               { 
                  "totals":true,
                  "outline":"Top only",
                  "fontFamily":"Segoe UI Semibold",
                  "fontSize":10
               }
            ],
            "columnHeaders":[ 
               { 
                  "outline":"Bottom only",
                  "alignment":"Auto",
                  "wordWrap":true,
                  "autoSizeColumnWidth":false,
                  "fontFamily":"Segoe UI Semibold",
                  "fontSize":10
               }
            ]
         }
      },
      "pivotTable":{ 
         "*":{ 
            "grid":[ 
               { 
                  "gridVertical":false,
                  "gridHorizontal":true,
                  "gridHorizontalColor":{ 
                     "solid":{ 
                        "color":"#E6E6E6"
                     }
                  },
                  "gridHorizontalWeight":2,
                  "rowPadding":4,
                  "outlineColor":{ 
                     "solid":{ 
                        "color":"#E6E6E6"
                     }
                  },
                  "outlineWeight":2,
                  "textSize":10
               }
            ],
            "columnHeaders":[ 
               { 
                  "fontColor":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "backColor":{ 
                     "solid":{ 
                        "color":"#009900"
                     }
                  },
                  "outline":"Bottom only",
                  "alignment":"Auto",
                  "wordWrap":true,
                  "autoSizeColumnWidth":false,
                  "fontFamily":"Segoe UI Semibold",
                  "fontSize":10
               }
            ],
            "rowHeaders":[ 
               { 
                  "outline":"None",
                  "stepped":false,
                  "wordWrap":true,
                  "fontSize":10,
                  "alignment":"Auto"
               }
            ],
            "values":[ 
               { 
                  "backColorPrimary":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "backColorSecondary":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "bandedRowHeaders":false,
                  "outline":"None",
                  "wordWrap":true,
                  "fontSize":10
               }
            ],
            "subTotals":[ 
               { 
                  "rowSubtotals":false,
                  "columnSubtotals":false,
                  "fontFamily":"Segoe UI Semibold",
                  "backColor":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "fontSize":10,
                  "rowSubtotalsPosition":"Top"
               }
            ],
            "total":[ 
               { 
                  "fontFamily":"Segoe UI Semibold",
                  "backColor":{ 
                     "solid":{ 
                        "color":"#FFFFFF"
                     }
                  },
                  "applyToHeaders":true,
                  "fontSize":10
               }
            ]
         }
      },
      "page":{ 
         "*":{ 
            "background":[ 
               { 
                  "color":{ 
                     "solid":{ 
                        "color":"#F3F3F1"
                     }
                  },
                  "transparency":0
               }
            ],
            "outspace":[ 
               { 
                  "color":{ 
                     "solid":{ 
                        "color":"#F3F2F1"
                     }
                  }
               }
            ]
         }
      }
   }
}

 

Trebor
Advocate I

Hi @v-qiuyu-msft,

 

Any updates on this?

 

Thanks.

ReversILIONX
Regular Visitor

I'm curious about this one as well. We use a background image to colour certain areas on a page (slicer area is a grey bar on the left side of the page ) but the no fill option does not display the color of the background image. It works correctly for the items background

Anonymous
Not applicable

Hi,

 

ran into the same problem also, seems like a clear bug.

'No fill' option for the visual Title background should be possible also when using a custom theme.

Please fix!