Color Coding Grid Columns Based on Hex Color Data

In data visualization, it is often useful to represent different statuses with distinct colors for better clarity and user experience. This article outlines a method to dynamically set the background color of a grid column based on hex color data from another column.

Sample Data:

Solution Overview

For example, to achieve the desired color coding for the “Check Status” column based on the “status_colour” field (hex color code), you can use a specific expression that combines HTML and data values. This method allows for a visually dynamic representation of status entries in your grid.

Steps to Implement

1. Create an Expression:

   Use the following expression to set the background color for the “Check Status” column:

   CONCAT('<div class="uniqueClassBGColor" style="padding:-11px;background-color:', [status_colour], ';">', [Check Status], '</div>')
   

   Explanation:

   • The CONCAT function is used to combine HTML tags with the color and text values.
   • The style attribute sets the padding and assigns the background color from the status_colour column.
   • The Check Status displays the text of the column inside the div.

2. Bind the Expression to the Grid:

   After creating the expression, bind it to the grid. This will apply the background color specified in the status_colour column to the “Check Status” text.

Output in Bold BI:

By following these steps, the background color of the “Check Status” column will dynamically reflect the color specified in the status_colour column, enhancing the visual representation of the data.

Additional References

• Advanced settings in Grid for condition based color formatting