Conditional Formatting & General Text Formatting

Tips, Tricks & Query Examples
1

While Redash doesn’t naturally support conditional formatting, this can be bypassed with some html tags.

    CASE
        WHEN cat.color IN ('short_hair',
                              'semi_short_hair')
             AND cat_count > 1000 THEN '<div class="bg-success p-10 text-center">' || count(cat) || '</div>'
             OR cat_count > 200 THEN '<div class="bg-warning p-10 text-center">' || count(cat) || '</div>'
        ELSE '<div class="bg-danger p-10 text-center">' || count(cat) || '</div>'
    END AS cat_count

In this example we cover different formatting types you can apply in a div:

  1. Colors - green (bg-success), yellow (bg-warning) and red (bg-danger). You can also use bg-info for blue but who wants blue in their tables?
  2. Padding - we used p-10 to pad the text just a little bit.
  3. Text alignment - we aligned our cat counts to the center (text-center), by default tables are aligned to the left.

Other styling formats you can use:

  1. Font Size (font-size) - can be pixels (10px, 20px, 34px and so on), relative (50%, 150%…), textual (large, medium, xx-small…) or HTML tags for headings (h1, h2…).
  2. Headings <h1> and Displays (class = display1) - h1-h6 are heading sizes when h1 is the largest, display is a class you can combine with a heading to get a more stylized look.
  3. Font type (font-family) - change the font, not all fonts are supported in each browser so it’s tricky.
  4. Misc- mark (mark), underline (u) , bold (strong), italic (em)

You’re welcome to try other Bootstrap CSS tricks and share with us.

2 Likes
2

I cannot get this to work with aggregate functions as displayed. Works great otherwise.

3

I think it’s placed inside string literal by mistake? Should be concatenation of strings instead.

4

You’re correct (I updated the post accordingly). Thanks!

5

Very helpful! Thanks!
I used that and changed it to affect the text color instead of the background color, but when I want to do counter visualization it present the code itself and not the value. What should I do?
Attached a picture - total_done is the value I want to display and is the field with the text color formatting.

image
image1886×505 23.1 KB

6

HTML is not supported in counters.

7

Oh ok thanks.
Is there another solution?
I want the color to be determine by my terminology and not just in reference to the target number.

8

can you please give example how i can color format a cell with table ?

1 Like
9

I needed a solution, so I created a chrome extension.

Hit me up on Twitter if you have any feedback. @Dev2o