Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
NikosSpanos
Contributor III
Contributor III

Customize data label color of combo-chart bars using CSS script

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:

Screenshot_11.png

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.

Labels (5)
3 Solutions

Accepted Solutions
EliGohar
Partner - Creator III
Partner - Creator III

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

EliGohar_0-1636006427911.png

Eli.

View solution in original post

Joseph_Musekura
Support
Support

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,

View solution in original post

GabrielLima
Partner - Contributor III
Partner - Contributor III

I change the mashup:

I downloaded the theme: 

https://github.com/clusterdesign/nightmode-extension

Then set the theme in the mashup.  

qlik.theme.apply('nightmode');
 
GabrielLima_0-1636027430163.png

 

View solution in original post

5 Replies
Spivey
Partner - Contributor III
Partner - Contributor III

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

 

GabrielLima
Partner - Contributor III
Partner - Contributor III

Any solution for this problem?

I put the graph in a dark mashup, and the labels were bad to read.

GabrielLima_0-1635966589949.png

 

EliGohar
Partner - Creator III
Partner - Creator III

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

EliGohar_0-1636006427911.png

Eli.

Joseph_Musekura
Support
Support

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,

GabrielLima
Partner - Contributor III
Partner - Contributor III

I change the mashup:

I downloaded the theme: 

https://github.com/clusterdesign/nightmode-extension

Then set the theme in the mashup.  

qlik.theme.apply('nightmode');
 
GabrielLima_0-1636027430163.png