Adding color to dimensions in objects (e.g. Tree Map and Bar Chart) can not only make them look more appealing, but will also help draw the user’s attention to where it’s needed the most.
Developers often use the ColorMix1 function to indicate intensity of measure on a color spectrum, where a lighter color indicates lower value and a darker color indicates greater value.
Take a look at the example Tree Map below, which displays Revenue by Department as Measure and Dimension, respectively.
In the chart above, we color each Department by Sales Margin, using one continuous spectrum between two colors, via the ColorMix1 function:
ColorMix1( rank(total Margin) / noofrows(TOTAL) , rgb(15, 97, 119), rgb(36, 242, 197))
Higher and lower Margins are now obvious. But can we determine from this if Margin values are good or bad? Not really.
We can improve this chart further by using coloring based on a two-color spectrum. Above a specified threshold, the values will be in shades of green; below the threshold, they will appear in shades of red.
To make this happen, let’s change our expression to include conditional color separation: for Margins over 55 percent, let’s assign a green color spectrum, and for Margins under 55 percent, let’s assign a red color spectrum, as shown in the expression below:
If(Margin>=0.55, ColorMix1( rank(total Margin) / noofrows(TOTAL) , RGB(124, 129, 55), RGB(211, 216, 163)), //Green spectrum ColorMix1( rank(total Margin) / noofrows(TOTAL) , RGB(134, 26, 17), RGB(248, 204, 201))) //Red spectrum where a Margin of 0.55 (55 percent) is our target, and values are considered good if above—and bad if below—that target.
Now, our chart provides not only information regarding which department has the higher and lower margins, but also indicates just how good or bad the margin is based on the specified threshold, or target.
To add consistency, clarity and reusability in our code, let’s create two variables to hold the green and red color spectrums:
Now we can modify our Color Expression to use the two-color spectrum by substituting RGB values with their corresponding variables:
If(Margin>=0.55, ColorMix1( rank(total Margin) / noofrows(TOTAL) , $(vColorScaleGreen)), ColorMix1( rank(total Margin)/ noofrows(TOTAL) , $(vColorScaleRed)))
This coloring approach can be used in both Qlik Sense and QlikView (in View, you would apply the ColorMix1 to the “Background Color” property of Expression). Keep in mind that for consistency and readability, you should always use the same color scale for good and bad values across all sheets and objects.
Finally, if your organization ever needs help improving its chart design, please don’t hesitate to reach out to us with any questions or concerns. Our expert consultants will be happy to get you on your way.
Share on
