Custom Theme text not applying to all Axis Labels

[dhgaimez]

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"
]
}
]
}

[Patrik_Lundblad · Accepted solution]

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_Extensi...

Regards,

Patrik.

[dhgaimez]

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