How to Apply a Custom Color to the Axis Title in the Heatmap Widget (Bold BI)
Published:
Overview
In Bold BI, you can change the X‑axis and Y‑axis title colors of a Heatmap widget using the widget Properties panel. This allows you to match branding or improve visual clarity.
For consistent styling across multiple dashboards, the same change can also be applied using a custom dashboard theme.
Prerequisites
- Before you begin, ensure that:
- You have access to Bold BI Dashboard Designer
- You have permission to edit the dashboard
- The dashboard already contains a Heatmap widget
- (Optional) You have admin access to upload a custom theme to Bold BI Server (for global styling)
Method 1: Apply Axis Title Color Using the Heatmap Properties Panel (Recommended)
Step 1: Open the Dashboard in Edit Mode
- Log in to Bold BI
- Open the required dashboard
- Click Edit to open it in Dashboard Designer
Step 2: Select the Heatmap Widget and Open the Properties Panel
- Click on the Heatmap widget within the dashboard canvas. With the Heatmap selected, locate the Properties panel on the right side.
Step 3: Configure the X‑Axis Title Color
- In the Properties panel, locate the Title Color option
- Select your preferred color using the color picker or HEX value
Example: Red color configured for the X-Axis Title color in the HEX value section
Step 4: Configure the Y‑Axis Title Color
- Expand Y‑Axis in the Properties panel
- Locate Title Color
- Choose the required color
Example: Green color configured for the X-Axis Title color iin the HEX value section
Step 5: Save and Validate the Changes
- Click Apply
- Click on Preview button to switch to View mode
- Confirm that both axis titles display the updated colors
Method 2 (Optional): Apply Axis Title Color Using a Custom Theme (Global Styling)
- Use this method when you want the same axis title color across multiple dashboards.
Step 6: Update the Heatmap Theme Variable
- Add or update the following variable in your custom theme CSS file:
- CSS/* Heatmap Widget Axis Title Color */–heatmap-widget-axis-title-font-color: #0000ff;
Step 7: Upload and Apply the Custom Theme
- Log in to Bold BI Server
- Navigate to Settings → Appearance / Themes
- Upload the updated theme file
- Apply the theme to the dashboard
Expected Result - X‑axis and Y‑axis titles in the Heatmap widget display the custom color
- Styling remains consistent in View mode and embedded dashboards
- (If using a theme) The color applies automatically to all Heatmap widgets using the theme
Notes:
- Theme variable support is documented in the Heat Map theme customization KB.
- After editing theme variables, you must generate the custom dashboard theme minified file and upload it to the server.
Related Articles
EO
