How to Customize the Color of Empty Data Point in a Heatmap Widget

In some cases, you may want to change the color of empty data points in a heatmap to better visualize your data. Bold BI allows you to do this using custom theme support. This article will guide you on how to change the color of empty data points in a heatmap using the --heatmap-widget-emptyfill-color CSS property in the theme file.

Steps to Change Empty Data Point Color

1. Create a custom theme file. Refer to this link on how to create a custom theme using CSS variable

2. Then edit the boldbi.heatmap.widgets.definition.css file which is located in themes/{light-or-dark}/widgets.

3. Change the value of the property to the desired color. For example, we have assigned a value as #f5f5b5.

   --heatmap-widget-emptyfill-color:#f5f5b5;
   

   

4. Upload the custom theme and apply it. Refer to this link to learn how to apply custom theme in Bold BI.

Before changes

After changes