topic Re: Chart Background Shading in App Development

Chart Background Shading

cfountain72 — Thu, 05 Jan 2023 15:48:36 GMT

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

Re: Chart Background Shading

KGalloway — Thu, 05 Jan 2023 22:03:58 GMT

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.

Re: Chart Background Shading

cfountain72 — Fri, 06 Jan 2023 13:16:57 GMT

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.

Re: Chart Background Shading

KGalloway — Fri, 06 Jan 2023 14:19:38 GMT

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

Re: Chart Background Shading

QFabian — Fri, 06 Jan 2023 14:59:40 GMT

Hi @cfountain72 , you can try something like this :

Just need to create reference lines :

Re: Chart Background Shading

cfountain72 — Fri, 06 Jan 2023 15:03:48 GMT

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.

Re: Chart Background Shading

QFabian — Fri, 06 Jan 2023 15:41:08 GMT

@cfountain72

Re: Chart Background Shading

cfountain72 — Fri, 06 Jan 2023 15:48:38 GMT

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

Re: Chart Background Shading

QFabian — Fri, 06 Jan 2023 16:33:54 GMT

Excelent! @cfountain72 , good weekend

Re: Chart Background Shading

chmarino — Wed, 13 Mar 2024 13:58:23 GMT

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 🙂