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

    Increasing font size with a custom theme

    Aaron Bishop
    Aaron Bishop Feb 14, 2018 2:00 PM

      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
          Peter Cappelle Feb 15, 2018 9:38 AM (in response to Aaron Bishop)

          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
              Aaron Bishop Feb 15, 2018 12:10 PM (in response to Peter Cappelle )

              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
                  Aaron Bishop Feb 15, 2018 1:36 PM (in response to 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"

                    }

                  }