topic Re: Using Styles (CSS) properties on Multi KPI extension object in App Development

Using Styles (CSS) properties on Multi KPI extension object

john_obrien — Sat, 16 Nov 2024 06:28:14 GMT

I am looking for tips or an example on using the CSS style property on measures.
The latest release (Feb 2019) has a great set of visualization objects, including a Multi KPI object with various format and appearance options. The CSS style property on measures look a very powerful option. It allows pasting a CSS in text box, but I'm not sure how to use that property with the others for that measure and/or the other measures.

Any advice would be greatly appreciated!

Re: Using Styles (CSS) properties on Multi KPI extension object

Zaga_69 — Mon, 25 Mar 2019 08:13:11 GMT

Hi John,

I used this piece of code to modify the background color and another aspects.

However, it does not work to change the font size.

Someone has any idea how to manipulate the font size in a multi KPI?

.qv-object-qlik-multi-kpi, .qv-object-barchart, .qv-object-combochart, .qv-object-linechart, .qv-object-table {
border-radius: 3px;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.16);
background: white !important;
padding: 1em;
border-radius: .5em;
margin: .5em auto;
height: calc(100% - 1em);
body {
font-size: 90%
}
}

regards,

Edi

Re: Using Styles (CSS) properties on Multi KPI extension object

jmmayoral3 — Mon, 06 May 2019 08:31:42 GMT

Hello John.
I had the same problem an I have found the solution in the page of "simple KPI" in GitHub:
https://github.com/alner/qsSimpleKPI

Here is an example:

@import url('https://fonts.googleapis.com/css?family=Indie Flower');
@import url('https://fonts.googleapis.com/css?family=Fredoka One');

& .label * {
font-family: 'Fredoka One';
font-size: 300%;
}

& .statistic-1 .value * {
background-color: green;
font-family: 'Indie Flower', sans-serif;
color: white !important;
}

& .value * {
background-color: yellow;
font-family: 'Indie Flower', sans-serif;
font-size: 900%;
color: red !important;
}

I hope this will be useful for you.

Re: Using Styles (CSS) properties on Multi KPI extension object

Suus — Mon, 15 Jul 2019 11:26:59 GMT

Do you know the CSS coding for color based on expression?

Re: Using Styles (CSS) properties on Multi KPI extension object

Tyler_Waterfall — Wed, 07 Aug 2019 11:41:59 GMT

Same question for me -- I'd like to color the measure red if the value is greater than zero.

If(Sum(errors)>0,red) for example...

Re: Using Styles (CSS) properties on Multi KPI extension object

prabhu0505 — Mon, 09 Sep 2019 19:39:26 GMT

@jmmayoral3

Trying to add responsive with below script but it doesn't work. Did you try anything of this sort? Thanks!

& .label[max-height~="100px"] {
font-size: @labelSize * 0.75;
justify-content: center;
color: blue;
}
& .value[max-height~="100px"] {
font-size: @labelSize * 0.75;
justify-content: center;
color: blue;
}

Re: Using Styles (CSS) properties on Multi KPI extension object

josemanuel_mart — Tue, 10 Sep 2019 09:03:41 GMT

Hello Tyler.

Have you tried to write an expresion in the "color" box?

Something like this:
if(Sum(errors)>0, '#FF0000', '#00FF00')

Pay attention to the single quotes in the colors. And I think that colors have to be in hexadecimal format.

Best regards

Using Styles (CSS) properties on Multi KPI extension object

jmmayoral3 — Tue, 10 Sep 2019 09:07:34 GMT

Hello Tyler.

Have you tried to write an expresion in the "color" box?

Something like this:
if(Sum(errors)>0, '#FF0000', '#00FF00')

Pay attention to the single quotes in the colors. And I think that colors have to be in hexadecimal format.

Best regards

Re: Using Styles (CSS) properties on Multi KPI extension object

patricesalem — Tue, 11 Feb 2020 21:57:50 GMT

Hello

Can you tell us where is the color box ?

If I activate the conditional value color, I don't have any field appearing to enter a conditional formula.

I'm running on Qlik Sense sept 19 - is it a bug ?

Re: Using Styles (CSS) properties on Multi KPI extension object

fabdulazeez — Fri, 24 Jul 2020 02:12:48 GMT

Conditional Value color are for master measure

Re: Using Styles (CSS) properties on Multi KPI extension object

jason_wood — Wed, 19 Aug 2020 21:36:37 GMT

Re: Using Styles (CSS) properties on Multi KPI extension object

SG_RightQlik — Thu, 24 Sep 2020 09:34:32 GMT

Hi all,

Does anyone know how I can change the font colour of dimension labels in the Multi KPI box?

In my mashup I cant see it as it is set to white with a white background.

Thanks

Re: Using Styles (CSS) properties on Multi KPI extension object

julietotsch — Wed, 11 Nov 2020 21:50:56 GMT

Being able to have conditional colors does not work when using the SimpleKPI and it doesn't matter if it is a Master Item or not. And, if you put the condition on a master measure, you can't use an expression.

Re: Using Styles (CSS) properties on Multi KPI extension object

shaan007 — Mon, 10 Jun 2024 06:42:29 GMT

Hi There,

I am using the theme Sense Horizon and it's displaying borders in every Multi KPI object.

How do I remove them using the styles(CSS) section in the Multi KPI property?

Thank you

Re: Using Styles (CSS) properties on Multi KPI extension object

Richard_Norris — Mon, 19 May 2025 14:51:34 GMT

This is great, thanks. How do we find element names though?