Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
8 years ago
Solved

JSON Theme Code for Text Box

Hi All,

 

Is anyone aware on how to set the font for a text box to a different font (such as arial)? I am looking around and not finding anything. It looks like it doesn't live under the "visualStyles" category.

 

Any help (or sample code!) would be great.

 

Thanks,

James

  • Using that I found that you can set the font family, size, color etc using he "*": attribute, sample code below:

            "textbox": {
    			"*": {
    				"*": [
    					{
    						"fontSize": 40,
    						"fontFamily": "Calibri",
    						"wordWrap": true,
    						"color": { "solid": { "color": "#FFFFFF"} }
    				}],
    				"general": [{
    					"responsive": true
    				}],
    				"background": [{
    					"show": false,
    					"color": { "solid": { "color": "#DDDDDD"}},
    					"transparency": 100
    				}],
    				"visualHeader": [{
    					"show": false
    				}]
    			}
    		}
  • Hoi SteveVail,

    I don't use PBI much anymore but we still have reports using this "textbox" formatting in a custom theme, they all still work in Version: 2.91.884.0 64-bit (March 2021). I made a minimal demo theme to test it and applied it as a new theme, which all seems to work. Sample code below to show where I put the code in the answer above. Cheers.

    {
        "name": "Textbox format demo",
        "dataColors": [
            "#0F5CA4",
            "#71cff4",
            "#0F8CD2",
            "#00b050",
            "#92d050",
            "#FF9900",
            "#FF0000",
            "#C0C0C0",
            "#3599B8",
            "#DFBFBF",
            "#4AC5BB",
            "#5F6B6D",
            "#FB8281",
            "#F4D25A",
            "#7F898A",
            "#A4DDEE",
            "#FDAB89",
            "#B687AC",
            "#28738A",
            "#A78F8F",
            "#168980",
            "#293537",
            "#BB4A4A",
            "#B59525",
            "#475052",
            "#6A9FB0",
            "#BD7150",
            "#7B4F71",
            "#1B4D5C",
            "#706060",
            "#0F5C55",
            "#1C2325"
        ],
        "visualStyles": {
            "*": {
                "*": {
                    "*": [
                        {
                            "fontSize": 14,
                            "fontFamily": "Calibri, Cambria",
                            "wordWrap": true,
                            "color": {
                                "solid": {}
                            }
                        }
                    ],
                    "valueAxis": [
                        {
                            "showAxisTitle": true,
                            "gridlineStyle": "solid"
                        }
                    ],
                    "wordWrap": [
                        {
                            "show": true
                        }
                    ],
                    "general": [
                        {
                            "responsive": true
                        }
                    ]
                }
            },
            "textbox": {
                "*": {
                    "*": [
                        {
                            "fontSize": 40,
                            "fontFamily": "Calibri",
                            "wordWrap": true,
                            "color": {
                                "solid": {
                                    "color": "#FFFFFF"
                                }
                            }
                        }
                    ],
                    "general": [
                        {
                            "responsive": true
                        }
                    ],
                    "background": [
                        {
                            "show": false,
                            "color": {
                                "solid": {
                                    "color": "#DDDDDD"
                                }
                            },
                            "transparency": 100
                        }
                    ],
                    "visualHeader": [
                        {
                            "show": false
                        }
                    ]
                }
            },
            "areaChart": {
                "*": {
                    "general": [
                        {
                            "responsive": true
                        }
                    ],
                    "legend": [
                        {
                            "show": true,
                            "position": "Bottom Center",
                            "showTitle": false,
                            "fontFamily": "Calibri",
                            "fontSize": 14
                        }
                    ],
                    "categoryAxis": [
                        {
                            "show": true,
                            "axisType": "continuous",
                            "fontSize": 14,
                            "fontFamily": "Calibri",
                            "showAxisTitle": false,
                            "titleFontSize": 14,
                            "titleFontFamily": "Calibri"
                        }
                    ],
                    "valueAxis": [
                        {
                            "show": true,
                            "position": "Left",
                            "axisScale": "Linear",
                            "fontSize": 14,
                            "fontFamily": "Calibri",
                            "showAxisTitle": true,
                            "axisStyle": "showTitleOnly",
                            "titleFontSize": 14,
                            "titleFontFamily": "Calibri",
                            "gridlineShow": true,
                            "gridlineColor": {
                                "solid": {
                                    "color": "#B3B3B3"
                                }
                            },
                            "gridlineThickness": 1,
                            "gridlineStyle": "solid"
                        }
                    ],
                    "dataPoint": [
                        {
                            "defaultColor": {
                                "solid": {
                                    "color": "#448822"
                                }
                            }
                        }
                    ]
                }
            },
            "page": {
                "*": {
                    "outspace": [
                        {
                            "color": {
                                "solid": {
                                    "color": "#003B5D"
                                }
                            }
                        }
                    ],
                    "background": [
                        {
                            "color": {
                                "solid": {
                                    "color": "#003B5D"
                                }
                            },
                            "transparency": 0
                        }
                    ]
                }
            }
        }
    }

14 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable

    HI Anonymous,

     

    Current it seems like only visuals can use json theme to customize. (shape, line and textbox not include)

    Maybe you can try to use theme to setting global font style to apply default font on text box.

     

    Regards,

    Xiaoxin Sheng

    • Anonymous's avatar
      Anonymous
      Not applicable

      Hi Anonymous

       

      Do you have example JSON code that shows how to set the global font?

       

      Thanks,

      James

      • Anonymous's avatar
        Anonymous
        Not applicable

        HI Anonymous,

         

        You can take a look at official document:

        Use Report Themes in Power BI Desktop (Preview)

         

        It seems like you write properties without specific visual types, it will try to apply it to whole visuals.

         

        Regards,

        Xiaoxin Sheng

  • Anonymous's avatar
    Anonymous
    Not applicable

    Any update here? I'm also unable to find a way to specify text box font family and size in a custom theme.

  • eyebelieve's avatar
    eyebelieve
    Frequent Visitor

    This works if I don't have any styles (border/shadow) on the visuals, however if I do, this doesn't work -- any workarounds? 

    • toribiolmSXP's avatar
      toribiolmSXP
      Frequent Visitor

      There are different options available depending on the visual you want to define in the theme.

      To define the default format in your theme for Border/Shadow, add the below to the definition and amend the colours and options available as you need.

       

              "border": [
                {
                  "color": {
                    "solid": {
                      "color": "#003b6f"
                    }
                  },
                  "show": false,
                  "radius": 0
                }
              ],
              "dropShadow": [
                {
                  "show": false,
                  "color": {
                    "solid": {
                      "color": "#003b6f"
                    }
                  },
                  "position": "Outer",
                  "preset": "BottomRight",
                  "shadowSpread": 3,
                  "shadowBlur": 10,
                  "angle": 45,
                  "shadowDistance": 10,
                  "transparency": 70
                }
              ],

      Hope this helps

      Luis