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

[Trebor]

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.

[v-qiuyu-msft]

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]

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]

Hi @v-qiuyu-msft,

Any updates on this?

Thanks.

[ReversILIONX]

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]

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!