Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, get a free DP-600 exam voucher to use by the end of 2024. Register now

Reply
Anonymous
Not applicable

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

2 ACCEPTED SOLUTIONS

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
				}]
			}
		}

View solution in original post

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
                    }
                ]
            }
        }
    }
}

View solution in original post

14 REPLIES 14
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? 

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

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.

Anonymous
Not applicable

I was never able to get the formatting to apply to text boxes.

I found this

 

https://github.com/deldersveld/PowerBI-ThemeTemplates/blob/master/Textbox.json

 

which gives some theme options for textbox. But I cannot work out the Text Size, color etc.

 

Perhaps someone else here can. I will continue trying.

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
				}]
			}
		}

When I add the above code, it breaks the json file and consequently will not load.

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
                    }
                ]
            }
        }
    }
}

Thanks a lot StuartSkabo!

That is exactly what I needed!

JamesBI, please, mark this answer as solved!

Josep.

v-shex-msft
Community Support
Community Support

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

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.
Anonymous
Not applicable

Hi @v-shex-msft

 

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

 

Thanks,

James

Diz
Frequent Visitor

Hiya,

Did you end up figuring this out? I'm trying to do the same thing.

Thanks,

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

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

Helpful resources

Announcements
November Carousel

Fabric Community Update - November 2024

Find out what's new and trending in the Fabric Community.

Live Sessions with Fabric DB

Be one of the first to start using Fabric Databases

Starting December 3, join live sessions with database experts and the Fabric product team to learn just how easy it is to get started.

Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.

Nov PBI Update Carousel

Power BI Monthly Update - November 2024

Check out the November 2024 Power BI update to learn about new features.