Qlik Community

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
QlikWorld happening right now! You can still join: REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
acbishop2
Creator
Creator

Increasing font size with a custom theme

I need to adjust the title and label font size in all graphs. I've been able to adjust the title font size by following the instructions found at . This code works to adjust the title font size:

{
 
"_inherit": true,
 
"_variables" : {
   
"@greenColor" : "#61a729",
   
"@text": "#4c4c4c"
 
},
 
"color": "@text",
 
"fontSize": "12px",
 
"object" : {
   
"title": {
     
"main": {
       
"fontSize" : "16px"
     
}
   
}
 
},
 
"dataColors": {
   
"primaryColor": "@greenColor"
 
}
}

However, when I try to change the label font size, I cannot get it to work. This is the code I have come up with:

{

  "_inherit": true,

  "_variables" : {

    "@greenColor" : "#61a729",

    "@text": "#4c4c4c"

  },

  "color": "@text",

  "fontSize": "24px",

  "object" : {

    "title": {

      "main": {

        "fontSize" : "24px"

      }

    },

"label": {

   "name": {

     "color": "@default",

  "fontSize" : "24px"

   },

   "value": {

     "color": "@default"

  "fontSize": "24px"

   }

}

  },

  "dataColors": {

    "primaryColor": "@greenColor"

  }

}

Please let me know what I am doing wrong. Thanks in advance!

Also, when can I expect the update that has font size as a drop-down bar in the app?

1 Solution

Accepted Solutions
acbishop2
Creator
Creator
Author

I figured out my problem. I thought that changing the "labels" values would change the labels for the axes in the graph. However, to change the labels on a graph's axis, I needed to do the following:

{

  "_inherit": true,

  "_variables" : {

    "@greenColor" : "#61a729",

    "@text": "#4c4c4c"

  },

  "color": "@text",

  "fontSize": "24px",

  "object": {

    "title": {

      "main": {

        "fontSize" : "24px"

      }

    },

"axis" : {

   "label" : {

     "name" : {

       "fontSize" : "20px"

     }

   }

}

},

  "dataColors": {

    "primaryColor": "@greenColor"

  }

}

View solution in original post

5 Replies
petercappelle
Partner
Partner

Hi Aaron Bishop,

Always try to validate your JSON code here: https://jsonlint.com/

If you validate it you will see you miss a "comma" after the second "@default" in the value block.

{

  "_inherit": true,

  "_variables" : {

    "@greenColor" : "#61a729",

    "@text": "#4c4c4c"

  },

  "color": "@text",

  "fontSize": "24px",

  "object" : {

    "title": {

      "main": {

        "fontSize" : "24px"

      }

    },

  "label": {

     "name": {

       "color": "@default",

       "fontSize" : "24px"

     },

     "value": {

       "color": "@default",

       "fontSize": "24px"

     }

  }

  },

  "dataColors": {

    "primaryColor": "@greenColor"

  }

}

acbishop2
Creator
Creator
Author

Peter,

Thank you for the direction! That definitely helps. However, after adding the comma, none of the font sizes of the labels on my graphs changed. Any ideas?

Thanks again,

Aaron

acbishop2
Creator
Creator
Author

I figured out my problem. I thought that changing the "labels" values would change the labels for the axes in the graph. However, to change the labels on a graph's axis, I needed to do the following:

{

  "_inherit": true,

  "_variables" : {

    "@greenColor" : "#61a729",

    "@text": "#4c4c4c"

  },

  "color": "@text",

  "fontSize": "24px",

  "object": {

    "title": {

      "main": {

        "fontSize" : "24px"

      }

    },

"axis" : {

   "label" : {

     "name" : {

       "fontSize" : "20px"

     }

   }

}

},

  "dataColors": {

    "primaryColor": "@greenColor"

  }

}

kristeljoymalapitan

Hi @acbishop2 ,

Where to place below sample code in resizing fonts? on Drive C:\?

Please confirm

 

Thank you

acbishop2
Creator
Creator
Author

Go to your Qlik folder, then Sense > Extensions >{Your theme folder here}.

For me, the path to this file was C:\Users\Me\Documents\Qlik\Sense\Extensions\my-font-theme\theme.json