Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hello All!
I am using the Qlik Sense Cloud SaaS edition, and I am attempting to change the value labels in all of my chart types to white. I have the following in my .json file:
{
"_inherit": true,
"_cards": false,
"_variables": {
"@TitleSize": "24px",
"@SubtitleSize": "16px",
"@TextSize": "14px",
"@FooterSize": "12px",
"@TitleColor": "#FFFFFF",
"@SubtitleColor": "#FFFFFF",
"@TextColor": "#FFFFFF",
"@FooterColor": "#FFFFFF",
"@BackgroundColor": "#3f3f3f",
"@AxisMajorColor": "#E8E8E8 ",
"@AxisMinorColor": "#A0A0A0 "
},
"customStyles": [{
"cssRef": "theme.css",
"classRef": "sense-theme"
}],
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif",
"backgroundColor": "@BackgroundColor",
"dataColors": {
"primaryColor": "#FF9F38 ",
"othersColor": "#199ECF ",
"errorColor": "#E15824 ",
"nullColor": "#E8E8E8"
},
"object": {
"label": {
"value":{
"color":"@TextColor"
},
"name":{
"color": "@TextColor"
}
},
"title": {
"main": {
"color": "@TitleColor",
"fontSize": "@TitleSize",
"fontFamily": "Roboto, sans-serif",
"backgroundColor": "@BackgroundColor"
},
"subTitle": {
"color": "@SubtitleColor",
"fontSize": "@SubtitleSize",
"fontFamily": "Roboto, sans-serif",
"backgroundColor": "@BackgroundColor"
},
"footer": {
"color": "@FooterColor",
"fontSize": "@FooterSize",
"backgroundColor": "#3f3f3f",
"fontFamily": "Roboto, sans-serif"
}
},
"filterpane": {
"title": {
"main": {
"color": "#FFFFFF",
"fontSize": "24px"
},
"subTitle": {
"color": "#FFFFFF",
"fontSize": "18px"
},
"footer": {
"color": "#FFFFFF",
"fontSize": "12px",
"backgroundColor": "#8e8e8e"
}
}
},
"axis": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
}
},
"line": {
"major": {
"color": "#E8E8E8 "
},
"minor": {
"color": "#A0A0A0 "
}
}
},
"grid": {
"line": {
"highContrast": {
"color": "#FFFFFF"
},
"major": {
"color": "#E8E8E8 "
},
"minor": {
"color": "#a0a0a0"
}
}
},
"referenceLine": {
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
}
},
"outOfBounds": {
"color": "@TextColor",
"backgroundColor": "@BackgroundColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
}
},
"legend": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
},
"label": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
}
}
},
"barChart": {
"backgroundColor": "@BackgroundColor",
"label": {
"name": {
"color": "@white"
},
"value": {
"color": "@white"
}
},
"title": {
"main": {
"color": "@default",
"fontSize": "@TextColor",
"fontFamily": "Roboto, sans-serif"
},
"subTitle": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
},
"footer": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif",
"backgroundColor": "@BackgroundColor"
}
},
"axis": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif"
}
},
"line": {
"major": {
"color": "#E8E8E8 "
},
"minor": {
"color": "#A0A0A0 "
}
}
},
"legend": {
"title": {
"fontSize": "@TextSize",
"fontFamily": "Roboto, sans-serif",
"color": "@TextColor"
},
"label": {
"fontSize": "@TextSize"
}
}
},
...
I have the Label property listed as in the bar chart in all chart property assignments; however, all of my data point labels are still the default font color. Anyone figured out a solution to this? I have searched through the community, looked through themes generated by SenseThemes, and even tried to download extensions (like the sheet styler extension), but still no luck. Any help is appreciated, and I am able to alter my .json or .css!!!
HI Jel,
Try with important rule in CSS like below, might be, it helps
"@TextColor": "#FFFFFF !important",
@MayilVahanan Where in the CSS do you put that rule? This is what I currently have:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.qvt-sheet {
background: #3A3A3A !important;
font-family: 'Roboto', sans-serif;
color: white;
"@TextColor": "#FFFFFF !important",
label: white !important;
}
.qv-object-content-container {
background: #3f3f3f !important;
color: white !important;
font-family: 'Roboto', sans-serif;
}
.qv-object-bullet-chart, .qv-object-funnel-chart, .qv-object-grid-chart,
.qv-object-heatmap-chart, .qv-object-multi-kpi, .qv-object-network-chart,
.qv-object-org-chart, .qv-object-sankey-chart, .qv-object-word-cloud-chart {
background: #3f3f3f;
color: white !important;
font-family: 'Roboto', sans-serif;
label: white !important;
}
...
Thank you for your help!