Chart Value Labels on Visualizations

jelwood — Tue, 27 Apr 2021 01:21:01 GMT

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!!!

Re: Chart Value Labels on Visualizations

MayilVahanan — Tue, 27 Apr 2021 04:22:30 GMT

HI Jel,

Try with important rule in CSS like below, might be, it helps

"@TextColor": "#FFFFFF !important",

Re: Chart Value Labels on Visualizations

jelwood — Tue, 27 Apr 2021 05:04:31 GMT

@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!

topic Chart Value Labels on Visualizations in QlikView

Chart Value Labels on Visualizations

Re: Chart Value Labels on Visualizations

Re: Chart Value Labels on Visualizations