3 Replies Latest reply: Feb 15, 2018 1:36 PM by Aaron Bishop RSS

    Increasing font size with a custom theme

    Aaron Bishop

      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?

        • Re: Increasing font size with a custom theme
          Peter Cappelle

          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"
            }
          }
          
            • Re: Increasing font size with a custom theme
              Aaron Bishop

              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

                • Re: Increasing font size with a custom theme
                  Aaron Bishop

                  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"

                    }

                  }