Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Using a small hack of multi kpi measure I want to change the default color of data labels in a combo-chart using css styling.
My chart looks like:
When I inspect the HTML document of the file I am not able to identify the div class or tid value related to the bar labels. Is any work around? Or it's not feasible at the moment?
Any suggestions are much appreciated.
Hello @NikosSpanos
This only can be achieved by using a custom theme and changing the JSON file.
I changed the property of barchart -> label -> color:
"barChart": {
"outOfRange": {
"color": "@white"
},
"label": {
"value": {
"color": "@green",
"fontSize": "14px"
}
}
}
Eli.
Hi @NikosSpanos ,
This Qlik documentation sustains the explanation provided by @Spivey
https://community.qlik.com/t5/Knowledge/Difference-between-the-CSS-and-JSON-file-in-a-Qlik-Sense-The...
To use custom theme check this as proposed by @EliGohar
Regards,
I change the mashup:
I downloaded the theme:
https://github.com/clusterdesign/nightmode-extension
Then set the theme in the mashup.
I also had a need to edit these chart labels using CSS but, unfortunately, they appear to be displayed in a <canvas> element, which indicates that the labels are generated using JavaScript and cannot be modified via CSS.
Here's the CSS selector for that <canvas> element:
canvas[data-key*="label"]
Any solution for this problem?
I put the graph in a dark mashup, and the labels were bad to read.
Hello @NikosSpanos
This only can be achieved by using a custom theme and changing the JSON file.
I changed the property of barchart -> label -> color:
"barChart": {
"outOfRange": {
"color": "@white"
},
"label": {
"value": {
"color": "@green",
"fontSize": "14px"
}
}
}
Eli.
Hi @NikosSpanos ,
This Qlik documentation sustains the explanation provided by @Spivey
https://community.qlik.com/t5/Knowledge/Difference-between-the-CSS-and-JSON-file-in-a-Qlik-Sense-The...
To use custom theme check this as proposed by @EliGohar
Regards,
I change the mashup:
I downloaded the theme:
https://github.com/clusterdesign/nightmode-extension
Then set the theme in the mashup.