Qlik Community

QlikView App Dev

Discussion Board for collaboration related to QlikView App Development.

Announcements
Support Case Portal has moved to Qlik Community! Read the FAQs to start exploring Support resources.
cancel
Showing results for 
Search instead for 
Did you mean: 
jelwood
Contributor II
Contributor II

Chart Value Labels on Visualizations

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

2 Replies
MayilVahanan

HI Jel,


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

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

Thanks & Regards,
Mayil Vahanan R
jelwood
Contributor II
Contributor II
Author

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