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: 
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 - Contributor III
Partner - Contributor III

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