topic Re: CSS for Chart Background Transparency in App Development

CSS for Chart Background Transparency

tresB — Sat, 16 Nov 2024 17:19:09 GMT

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.

Re: CSS for Chart Background Transparency

tresB — Mon, 12 Apr 2021 09:11:47 GMT

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

Re: CSS for Chart Background Transparency

Patricia_Silva — Mon, 12 Apr 2021 10:58:23 GMT

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

Re: CSS for Chart Background Transparency

tresB — Mon, 12 Apr 2021 11:46:17 GMT

Thank you @Patricia_Silva for replying. I tried like:

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

}

QS Ver: Nov 2020

Re: CSS for Chart Background Transparency

Patricia_Silva — Mon, 12 Apr 2021 13:09:07 GMT

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 😊

Re: CSS for Chart Background Transparency

tresB — Tue, 13 Apr 2021 07:19:44 GMT

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.

Re: CSS for Chart Background Transparency

tresB — Mon, 19 Apr 2021 11:33:34 GMT

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

Re: CSS for Chart Background Transparency

Chotana2 — Fri, 16 Sep 2022 09:54:38 GMT

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.

Re: CSS for Chart Background Transparency

jknjob — Thu, 26 Jan 2023 19:57:11 GMT

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

Re: CSS for Chart Background Transparency

Sávio — Thu, 18 Jul 2024 13:23:58 GMT

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

background-color: transparent !important;

}