Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Qlik Open Lakehouse is Now Generally Available! Discover the key highlights and partner resources here.
cancel
Showing results for 
Search instead for 
Did you mean: 
cfountain72
Creator II
Creator II

Chart Background Shading

Hello, 

I am trying to create a line chart, with background colors that correspond to certain ranges. So, for example, the background area over 80% would be shaded green, between 50-80 would be yellow, and below 50 would be red. Is this possible in Qlik Sense?

Thanks in advance for your help!

Chris

Labels (2)
1 Solution

Accepted Solutions
QFabian
MVP
MVP

@cfountain72 

QFabian_0-1673019319091.png

QFabian_1-1673019424926.png

QFabian_2-1673019443916.pngQFabian_3-1673019463283.pngQFabian_4-1673019480173.pngQFabian_5-1673019502329.pngQFabian_6-1673019535284.png

 

QFabian_7-1673019567198.png

QFabian_8-1673019589794.pngQFabian_9-1673019620832.pngQFabian_10-1673019641131.png

 

Greetings!! Fabián Quezada (QFabian)
did it work for you? give like and mark the solution as accepted.

View solution in original post

9 Replies
KGalloway
Creator II
Creator II

Hi,

I recently worked on a similar problem and found that there is no built in way to do this (unless I missed it). I did find a simple way to approximate this using a combo chart.

In the picture below, I set the dimension as "group" and add 3 measures:

1. the average of "value1" as a line on the primary axis

2. the average of "value2" as a line on the primary axis

3. a dummy measure that is always equal to 1 as a bar chart on the secondary axis

I then hid the axis and legend for the secondary y-axis and added code to color the bars according to their "group" value (see below).

=if(group = 'a', argb(50, 255,0,0),
     if(group = 'b', argb(50, 0,255,0),
     if(group = 'c', argb(50,0,0,255),
     if(group = 'd', argb(50, 0,255,255),
     // else
     argb(50,120,120,120)))))

I used the argb() function to get the colors to look more transparent and then defined a color for each group. This could be done more effectively for more group values by having them pre-mapped to color values in the load script.

KGalloway_1-1672956002836.png

 

cfountain72
Creator II
Creator II
Author

Thanks for your reply; I appreciate it. But I am looking to view the bars/segments on the Y-axis, where different line values fall within certain ranges.

KGalloway
Creator II
Creator II

Ah okay. I don't know a way to do that currently. Good luck!

QFabian
MVP
MVP

Hi @cfountain72 , you can try something like this :

QFabian_0-1673016898355.png

Just need to create reference lines :

QFabian_1-1673017126056.png

QFabian_2-1673017153916.png

 

 

Greetings!! Fabián Quezada (QFabian)
did it work for you? give like and mark the solution as accepted.
cfountain72
Creator II
Creator II
Author

Thanks. I have already applied the reference lines, but I need to be able to shade the areas between the lines. In your example, anything below the red line would be red/pink. Above red would be yellow, and so on.

QFabian
MVP
MVP

@cfountain72 

QFabian_0-1673019319091.png

QFabian_1-1673019424926.png

QFabian_2-1673019443916.pngQFabian_3-1673019463283.pngQFabian_4-1673019480173.pngQFabian_5-1673019502329.pngQFabian_6-1673019535284.png

 

QFabian_7-1673019567198.png

QFabian_8-1673019589794.pngQFabian_9-1673019620832.pngQFabian_10-1673019641131.png

 

Greetings!! Fabián Quezada (QFabian)
did it work for you? give like and mark the solution as accepted.
cfountain72
Creator II
Creator II
Author

Thanks! That's exactly what I was looking for. (Now I need to translate it to Ingles.)

QFabian
MVP
MVP

Excelent! @cfountain72 , good weekend

Greetings!! Fabián Quezada (QFabian)
did it work for you? give like and mark the solution as accepted.
chmarino
Contributor
Contributor

Hi Fabian,

which type of chart is that? Combo chart? because I don't have the same options as you when defining the style 😞

Also, all the bars are vertical and even though I'm putting them on secundary axis, they still keep being vertical. What am I missing? Because I'd desperately need to achieve the same result you show here!

P.S.: si quiere tambien podemos hablar en espanol si para ti es mas comodo 🙂