Coloring by expression

In the properties panel, you have options for changing the color settings of a visualization. The option Color by expression gives you great freedom to decide how to color the measure values in a visualization. In the expression you can define what colors to use and have different colors for different value ranges. In a table you can define both the color of the background and the text color, and color different measure columns individually. Other charts receive a single color across all measures (if multiple measures exist).

Correctly used, coloring by expression is a very efficient way of accentuating values of particular interest, or differentiating between values that do and do not meet a limit value.

The expression is a color code: Selected by default, because, normally, you want to use the expression as a color code. When this option is cleared, the expression evaluates to a number, which in turn is plotted against one of the chart gradients. If you use the same expression as the measure in the visualization, you will have the same coloring as Color by measure.

Visualizations that support color by expression

The following visualizations support color by expression:

• Bar chart
• Combo chart
• Line chart
• Pie chart
• Scatter plot
• Table
• Treemap

Supported expression formats

The following formats are supported when you create your expressions.

RGB

With RGB colors you enter an integer value between 0 and 255 (or an expression that evaluates to such a value) for each of the colors red, green, and blue. The resulting color is produced by adding the three colors together.

Example:  

rgb(0,0,255)

This example generates the color blue. Many of the RGB colors have a corresponding keyword in plain text that can be used instead of the RGB code. If you use 'blue' as expression, you would get exactly the same color. Hexadecimal numbers are also supported, and the color blue has the string '#0000ff'.

ARGB

The ARGB color model has the same support as the RGB color model, but extends it with an additional alpha value to set the opacity of a color.

Example:  

argb(125,0,0,255)

The first value (125), sets the alpha value. The value 0 generates full transparency and the value 255 full opacity.

HSL

In HSL, the color is defined by a hue value, a saturation value, and a luminosity value. You use values between 0 and 1. Hue is represented as an angle of the color circle (that is, the rainbow represented in a circle). Saturation is full with the value 1 and a shade of gray with the value 0. Lightness with the value 1 is white, and black with the value 0. The value 0.5 is commonly used.

Example:  

hsl(0,0.5,0.5)

This example generates a red color with medium saturation and lightness.

Qlik Sense color functions

The following color functions can be used in the expressions.

Creating an expression

You create expressions for colors in the properties panel.

Do the following:

1. In the properties panel, open Appearance > Colors and legend.

2. Click the Colors button to switch to Custom.

3. In the drop-down list, select the option By expression.

   An expression text box is opened.

4. Enter your expression in the text box, or click 3 to open the expression editor.

If the expression is valid, the visualization is updated.

Examples

Here are a few examples to show what you can do with expressions by color.

Example 1:  

if(sum([Budget Amount]) > 1000000, 'aliceblue', blue())

In this example there is a condition. If sum([Budget Amount]) is greater than 1 million, the corresponding measure values will be colored 'aliceblue', otherwise they will be colored blue.

'aliceblue' is the keyword for the color rgb(240, 248, 255).

blue() is the function that generates a blue color.

Example 2:  

argb(255,rand()*255,rand()*255,rand()*255)

This example starts with alpha value for full opacity, and then uses the rand() function to generate random values for the red, green, and blue colors.

Example 3:  

In the properties panel for a table, under Columns > <Measure name>, you have color expression options both for the background color and the text color. If you set a background color that is dark, the text color will automatically become white instead of black to improve readability.

The following screenshot shows the use of expressions for background color and text color. Measure values in Sales that are lower than $10000 have a red background color, all other values have a green background. In addition, the values that are higher $200000 are have the text color 'gold'.