Conditionally coloring column(s)

In SuperTables you can conditionally color columns to better visualize your data.

The right most column is conditionally colored.

Step 1: Open Configuration

Dashboard extension

Click on the container that has SuperTables running. This will display an arrow that you can click to open a menu. Upon opening the menu, click the 'Configure...' option to open the configuration panel for SuperTables.

Opening configuration panel in Dashboard

Viz extension

Step 2: Navigate to the Data tab

Step 3: Select your column

Select your column and scroll down to 'Conditional color formatting' section.

Step 4: Setting up your first conditional coloring

1. Select color cell background from the radio options.

2. Select a target column, select the same column as the one you have navigated to.

3. Select a below bounds color by clicking on the color swatch

4. Select a above bounds color by clicking on the color swatch

5. Setup an inbounds color.

6. Setup a lower bound.

   1. if your measure spans from -100 to 100 and you want any value below 0 to be colored according to your below bounds color then choose 0 as your lower bound.

7. Setup an upper bound.

   1. if your measure spans from -100 to 100 and you want any value above 50 to be colored according to your below bounds color then choose 50 as your upper bound.

8. Click Apply and Close

9. Now your measure should be color with your chosen colors.

The section below explains all the additional coloring options available.

Conditional Coloring Options

Color cell background

This options applying your coloring settings to the cell background

Color cell text

This options applying your coloring settings to the cell background

Color entire row

By default the conditional coloring is only applied to the column but with option you can apply it to the whole row instead.

Normal

Whole Row

Target Column

The column you use to color the column. The target column can be any other column. You can use one column to color another.

Color bounds

1. Lower Bound: The minimum value, anything value in column that is below this value will be colored with below bounds color.

2. Upper Bound: The maximum value, anything value in column that is above this value will be colored with below bounds color.

3. Below-Bounds Color: Color used to color values lower than or equal to lower bound.

4. Above-Bounds Color: Color used to color values higher than or equal to Upper bound.

5. In-bounds Color: Color used to color values between lower and upper bound.

Using a gradient

By default conditional coloring uses discrete values for upper, in and lower bounds but turning this option on will convert discrete coloring to gradient (continuous) resulting from lower bound to upper bound.

Custom font color

You can also assign a custom color to your font. The default color is black

Barchart

Instead of just coloring the cell you can also create a bar chart within the cell.

Min-Value: is the value where your barchart length is 0.

Max-Value: is the value where your barchart length is 100.