CSS for Chart Background Transparency

[tresesco]

Hello Team,

I want to make chart background transparent using CSS in multi-kpi object. Could anybody please help if there is any such property? I tried with 'Opacity' , but it makes the entire chart transparent, making the data points also go dimmed.

Thank you. 

[tresesco]

It seems not yet possible. Or, may be someone has a trick ?

[Patricia_Silva]

Hello, could you please share the piece of code you tried? So this way I can maybe try to review it. Thank you!

[tresesco]

Thank you @Patricia_Silva  for replying. I tried like:

.qv-object-barchart {
background-color: none;

}

QS Ver: Nov 2020

[Patricia_Silva]

Hello, maybe you can try to set it to transparent instead of none?

https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css

You can also try to set any color and then maybe try to set the opacity to 0?

I am also sharing a tools that you could maybe find useful to develop custom themes in Qlik Sense, it is quite basic but maybe it can be of any kind of help: https://sensetheme.com/edit

Thanks 😊

[tresesco]

Thank you very much @Patricia_Silva. Your post with direction was kind of re-iteration of tries for me. I was initially working with Ver Nov 2020 (SR 5) in a server environment; and nothing seemed like working for this background option for charts. With your emphasis, I went back to my desktop version ( Nov 2020 SR2), - with my surprise I saw that it worked. I tried with copy-pasting the same code to avoid any sort of error; but no - didn't work in my server version (SR 5). Then I tried few more things and found the result as follows:

- I copied the desktop app to server (SR2 -> SR5)  - Worked

- I copied the desktop app to server (SR2 -> SR5) and reloaded with new data  - Worked 

- Created a new app in SR5 and tried the same CSS - Didn't work

Update : 

Ohh..No, there is another catch! It seems that the application I was working on desktop (SR2) was actually imported from some earlier version. So, some new findings are like:

- If a create a new app in SR2 - It doesn't work

- If I remove the CSS responsible for transparency in SR2, SR5 (where it was working) - IT STILL remains transparent. 🤔😪 ...

It is true that I didn't work much on CSS or HTML - so I could be missing something obvious. 

[tresesco]

Hi @Patricia_Silva , did you get a chance to look into it?

[Chotana2]

Hi Tresesco, 

I still haven't found how to make the background transparent, but I can make it disappear 🙂

it's maybe your goal ; to have the multi-kpi with css code, and hide the component

1- <app URL>/options/developer

2- get the ID of the KPI

3-in the css, make it disappear

div[tid="gyHAMWV"]
{
display : none  !important;
}

it works for me on QSEOW August 2022

/C.

[jknjob]

Hello tresesco

There is an option in app overview section of any app in Qliksense, where in you have an option to change the Qliksense theme, so in order to have transparent background of any chart(including vizlib ones), please make sure the Qliksense theme is CLASSIC (Pic1  attached)

Once this theme is enabled, any object chart as part of the sheet will have a transparent background by default (Pic2  attached)

Hope it was helpful

Regards

Jayanth

[Sávio]

[tid="qv-object-map"] div.qv-inner-object.no-titles {

    background-color: transparent !important;

}