Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Uploads getting stuck in the virus scanner. We are investigating.
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Contributor III
Contributor III

Using Styles (CSS) properties on Multi KPI extension object

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!

1 Solution

Accepted Solutions
Highlighted
Creator
Creator

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.

View solution in original post

10 Replies
Highlighted
Creator
Creator

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

Highlighted
Creator
Creator

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.

View solution in original post

Highlighted
Partner
Partner

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

Highlighted
Employee
Employee

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...

Highlighted
Specialist
Specialist

@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;
}

Highlighted
Partner
Partner

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

Highlighted
Creator
Creator

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

Highlighted
Creator
Creator

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 ?

 

2020-02-11 22_55_52-DEV-Vizlib - Volumes and sales - KPI's _ Feuilles - Qlik Sense.jpg

Highlighted
Partner
Partner

Conditional Value color are for master measure

fabdulazeez_0-1595556755155.png