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

Shape the future of the Fabric Community! Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions. Take survey.

Reply
jazfunk
Frequent Visitor

Allow font change for Category label

While modifying an existing bullet chart visual, I want to give the user the option to change font for the Category fields.  I've added the format option in the capabilities.json file, and also the settings.ts file.  Additionally, I've set the attribute "font-family" to the newly created setting using:  .attr("font-family", model.settings.labels.fontFamily), however, the font change does not show in the visual.

 

I noticed that there's a font family selection in the built-in format item for the "Title" format object.  Thinking I could just replicate the existing logic, I scoured the JS and TS files in the package, and cannot locate it.

 

How can I implement this functionality?

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @jazfunk,

Whe you say the font change doesn't show in the visual, is then when packaged or using the developer visual?

If you're testing on a packaged visual that's in AppSource already, Power BI will always load that one, unless you have enabled developer mode in Power BI Desktop, which will temporarily allow you to load the local version as long as the file is open for that session.

If you want this change to be more permanent, you will need to change the guid property in pbiviz.json to a new ID that does not exist in AppSource, so Power BI will not load that one. Note that this is now effectively a new visual as far as Power BI is concerend, so if the original visual is certified then you will not get these benefits.

If you're experiencing the issue in the developer visual, please provide the full details of all changes made, as well as the visual you're extending from, as the information in the question does not provide enough detail for me to debug this reliably for you.

Regarding not being able to find the title font family, the title property menu applies to the visual container and is outside the control of the developer. Anything that customises the visual container and sits 'above' the iframe in the visual's DOM is handled by Power BI and ss such, they are automatically included by Power BI and it's not possible to inspect or extend them. The same applies for the following items:

  • General
  • Background
  • Locak asepct
  • Border
  • Shadow
  • Tooltip
  • Visual header

If you want to add a picker for font family, you can use the formatting type for your desired property in your capabilities.json with fontFamily set to true, e.g.:

  ...
  "type": {
    "formatting": { "fontFamily": true }
  }
  ...

Here's the part of the visuals API that is relevant to your challenge - you'll be able to see the other supported pre-defined formatting types here also.

Regads,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

Hi @jazfunk,

Whe you say the font change doesn't show in the visual, is then when packaged or using the developer visual?

If you're testing on a packaged visual that's in AppSource already, Power BI will always load that one, unless you have enabled developer mode in Power BI Desktop, which will temporarily allow you to load the local version as long as the file is open for that session.

If you want this change to be more permanent, you will need to change the guid property in pbiviz.json to a new ID that does not exist in AppSource, so Power BI will not load that one. Note that this is now effectively a new visual as far as Power BI is concerend, so if the original visual is certified then you will not get these benefits.

If you're experiencing the issue in the developer visual, please provide the full details of all changes made, as well as the visual you're extending from, as the information in the question does not provide enough detail for me to debug this reliably for you.

Regarding not being able to find the title font family, the title property menu applies to the visual container and is outside the control of the developer. Anything that customises the visual container and sits 'above' the iframe in the visual's DOM is handled by Power BI and ss such, they are automatically included by Power BI and it's not possible to inspect or extend them. The same applies for the following items:

  • General
  • Background
  • Locak asepct
  • Border
  • Shadow
  • Tooltip
  • Visual header

If you want to add a picker for font family, you can use the formatting type for your desired property in your capabilities.json with fontFamily set to true, e.g.:

  ...
  "type": {
    "formatting": { "fontFamily": true }
  }
  ...

Here's the part of the visuals API that is relevant to your challenge - you'll be able to see the other supported pre-defined formatting types here also.

Regads,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




jazfunk
Frequent Visitor

Daniel,

 

I solved the problem by figuring out that I was setting the font formatting style in the wrong method.  I am now able to change the font family style for the category labels, and it shows as such in the visual.  

 

Thank you for your detailed explanation.  I had already been able to assign a new, unique "guid" and my visual works both in PowerBI service, and Desktop.

 

Jeff.

Helpful resources

Announcements
November Carousel

Fabric Community Update - November 2024

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

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.