Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
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
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
Specialist III
Specialist III

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

 

 

QFabian
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
Specialist III
Specialist III

@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

 

QFabian
cfountain72
Creator II
Creator II
Author

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

QFabian
Specialist III
Specialist III

Excelent! @cfountain72 , good weekend

QFabian
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 🙂