Custom Theme text not applying to all Axis Labels

dhgaimez — Tue, 06 Apr 2021 17:52:05 GMT

Hi all,

I am new to creating custom themes in Qliksense, but I am running into a problem manipulating text using a css file where the font-family is only being applied to the axis of certain types of graphs. Its seems that the font is working for the axis on Combo and Pie Charts, but not working on Bar and Line charts. I attached a picture of the difference and also put my css and json files at the end of this post.

Does anyone know what may be going on here?
Appreciate any feedback.

theme.css

.qvt-sheet {
background: #ffffff !important;
}

.qv-object * {
font-family: Verdana;
}

Qlik Support.qv-object :not([font-family]) {
font-family: QlikView Sans,sans-serif;
}

theme.json

{
"_inherit": true,
"_variables": {
"@TitleSize": "16px",
"@SubtitleSize": "15px",
"@TextSize": "12px",
"@FooterSize": "10px",
"@TitleColor": "#53565A",
"@SubtitleColor": "#53565A",
"@TextColor": "#53565A",
"@FooterColor": "#53565A",
"@BackgroundColor": "#ffffff",
"@AxisMajorColor": "#BABBBD",
"@AxisMinorColor": "#BABBBD"
},
"customStyles": [
{
"cssRef": "theme.css",
"classRef": "theme"
}
],
"color": "@TextColor",
"fontSize": "@TextSize",
"backgroundColor": "@BackgroundColor",
"dataColors": {
"primaryColor": "#0098C3",
"othersColor": "#989A9C",
"errorColor": "#D2492A",
"nullColor": "#BABBBD"
},
"object": {
"title": {
"main": {
"color": "@TitleColor",
"fontSize": "@TitleSize"
},
"subTitle": {
"color": "@SubtitleColor",
"fontSize": "@SubtitleSize"
},
"footer": {
"color": "@FooterColor",
"fontSize": "@FooterSize",
"backgroundColor": "#ffffff"
}
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"value": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"axis": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"line": {
"major": {
"color": "#eeeeee"
},
"minor": {
"color": "#eeeeee"
}
}
},
"grid": {
"line": {
"highContrast": {
"color": "#eeeeee"
},
"major": {
"color": "#eeeeee"
},
"minor": {
"color": "#eeeeee"
}
}
},
"referenceLine": {
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"outOfBounds": {
"color": "@TextColor",
"backgroundColor": "#ffffff",
"fontSize": "@TextSize"
}
},
"legend": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"label": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
}
},
"palettes": {
"data": [
{
"name": "Dimension",
"translation": "HHC Dimension Colors",
"propertyValue": "28brt",
"type": "row",
"scale": [
"#0098C3",
"#6E9934",
"#53565A",
"#D2492A",
"#A40084",
"#33ADCF",
"#8BAD5D",
"#DB6D55",
"#C866B5"
]
}
],
"ui": [
{
"name": "New color picker color",
"colors": [
"#0098C3",
"#6E9934",
"#53565A",
"#D2492A",
"#A40084",
"#33ADCF",
"#8BAD5D",
"#DB6D55",
"#C866B5"
]
}
]
},
"scales": [
{
"name": "Measures",
"translation": "HHC Measure Colors",
"type": "class",
"propertyValue": "et50z",
"scale": [
"#0098C3",
"#6E9934",
"#53565A",
"#D2492A",
"#A40084",
"#33ADCF",
"#8BAD5D",
"#DB6D55",
"#C866B5"
]
}
]
}

Re: Custom Theme text not applying to all Axis Labels

Patrik_Lundblad — Wed, 07 Apr 2021 10:49:18 GMT

Hi!

The combo chart and the bar chart use different viz libraries, that's why you get the difference.

If you want to switch the font family you don't need the CSS file. Just add fontFamily to your theming file.

Scroll down to fontFamily to see the how it's used. https://help.qlik.com/en-US/sense-developer/February2021/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-properties.htm

Regards,

Patrik.

Re: Custom Theme text not applying to all Axis Labels

dhgaimez — Wed, 21 Apr 2021 13:34:28 GMT

Thanks for the answer Plu, just got around to trying it and this is working!

topic Re: Custom Theme text not applying to all Axis Labels in App Development

Custom Theme text not applying to all Axis Labels

Re: Custom Theme text not applying to all Axis Labels

Re: Custom Theme text not applying to all Axis Labels