topic Re: Mashup custom CSS in Integration, Extension & APIs

Mashup custom CSS

Thu, 13 Oct 2016 00:47:21 GMT

Hi,

I have been trying to change the text color on the X & Y axis and the labels on mashup - line chart in this case; Tried to set the color on a bunch of classes including .qv-chart-component-axis. I am not able to figure out the correct element/class for this one.

Hoping someone has done this before. Could you please point me in the right direction?

Thanks!

Re: Mashup custom CSS

Mon, 17 Oct 2016 11:27:56 GMT

Hi,

Native objects use canvas to paint the axis and labels, so I'm afraid It's not possible to override the CSS to change the colors. The solution would be to create a visualization extension so you can personalize it as much as you need.

Re: Mashup custom CSS

Wed, 19 Oct 2016 21:56:08 GMT

Thanks Jose;

Got it to work by changing the embedded theme.json in require.js

So On Desktop:

C:\Users\%USERNAME%\AppData\Local\Programs\Qlik\Sense\Client\assets\external\requirejs

Server:

C:\Program Files\Qlik\Sense\Client\assets\external\requirejs

Re: Mashup custom CSS

Thu, 20 Oct 2016 07:48:10 GMT

Interesting! Wouldn't that affect all objects in the hub??

Re: Mashup custom CSS

Thu, 20 Oct 2016 19:03:38 GMT

Yes it does but you can change colors of individual chart types as well; Apparently the next service release due in November will have extended support for themes.

I think you could also copy the whole theme.json from the highvis folder and link that in require.js. In my case, I am using QAP so there is no hub.

Re: Mashup custom CSS

Mon, 24 Apr 2017 16:50:42 GMT

Hi! I was wondering if I could ask a bit more about customizing the charts via CSS! I don't have a lot of Qlik experience but was hoping to be able to style some of my embedded charts via CSS with Qlik 3.1. I can get alternate style sheets/json files to load on my webpage with using the /theme= parameters (and I will try this require.js method as well so I don't have to change my url), Thanks!

But I don't see any hooks on the chart <canvas /> elements that would allow me to target my CSS. Looking at the charts rendered with the Chrome developer tool, I can't see how I can use css to target the chart colors. Any help or pointers would be greatly appreciated!

Re: Mashup custom CSS

Francis_Kabinoff — Mon, 24 Apr 2017 17:00:36 GMT

You can't use CSS to target stuff inside a canvas element. Canvas API - Web APIs | MDN

Re: Mashup custom CSS

Mon, 24 Apr 2017 17:48:27 GMT

Thanks so much... Does Qlik offer any other output options for charts other than the canvas element? Thanks again, really appreciate the input on this!

Re: Mashup custom CSS

Francis_Kabinoff — Mon, 24 Apr 2017 18:11:05 GMT

You can always use extensions. But the thing with canvas is it's not making dom manipulations, so it's usually much faster than svg.

You could refer to Aravind Sasidharan's comment above, but that's currently not supported.

Re: Mashup custom CSS

Mon, 24 Apr 2017 21:28:22 GMT

I think it depends on the type of customization that you want to do. In my case, I had a mashup (running on QAP) with a dark background and Qlik default theme is for light background so the only option was to hack require.js.

Open require.js and search for the chart type.

E.g. scatterPlot; You will see something similar to this. Now you can tweak the values.

scatterPlot":{

\n "value":{

\n "color":"@labelLowContrast",

\n "fontSize":"12px",

\n "background":"rgba(0,0,0,0)" \n

\n "shape":{

\n "border":{

\n "width":{

\n "default":1,

\n "selected":2 \n

\n "color":"rgba(0,0,0,0.7)" \n

\n "outOfBounds":{

\n "opacity":0.3 \n

} \n

\n "line":{

\n "color":"@lineHighContrast",

\n "width":1 \n

} \n

}

Again, as Francis mentioned this is not supported by Qlik and may break especially when you migrate to a new feature release. In 3.2, You may also want to override some of the properties in client.css

e.g

.qv-object {

…

background-color: #FFFFFF;

}