Multi KPI Customization

[calvin_wee]

Hi,

We just started to use Multi KPI instead of Simple KPI from the Github which is more or less the same.

We managed to customize CSS to produce the desire result below on top of the configurations using 1 Multi KPI Object.  The only problem is the CSS is applicable to all Multi KPI objects used. 

Can anyone advise how we can define CSS specifically for each Multi KPI used?

Any advice is greatly appreciated. 

Thanks and Regards

[ErikWetterberg]

Do you really want unique css for each MultiKPI object? Or have you got some(two, three) alternative designs?

What I have done with extensions is add a flag to the property panel. (boolean or dropdown depending on how many alternatives you have). Depending on the value of this flag I then add a CSS class to the top element in the visualization. I then include this class in my CSS rules.

[calvin_wee]

Hi, 

Thanks for your quick reply. 

Apparently the only thing we need to change is the colour that the function short. Layout with the css that we have can apply to all. 

Shape and layout we can use the same. But the colour theme have to be different. Likely 3 to 5. Also font colour change on condition is also desired that we are not able to do it for now.

On adding flag to property panel, can you enlighten on how it works and how to be done.

Thanks and Regards 

[calvin_wee · Accepted solution]

By changing to use Simple KPI extension, we are able to provide formula in the Font values and thus resolve the issue.