- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
getformattingmodel() implementation
Hi Developers!
I am new at power bi custom visual development. I am trying to add formatting pane for x axis label. FrontEnd/UI part is displayed correctly in power bi. I am facing difficulties in binding the data to it.
code for getformattingModel() in visual.ts file
public getFormattingModel(): powerbi.visuals.FormattingModel {
let dataCard: powerbi.visuals.FormattingCard = {
description: "Data Card Description",
displayName: "Axis Formatting",
uid: "dataCard_uid",
groups: [],
};
function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
return {
displayName: displayName,
uid: uid,
slices: [
{
uid: "data_font_control_slice_uid",
displayName: "Font",
control: {
type: powerbi.visuals.FormattingComponent.FontControl,
properties: {
fontFamily: {
descriptor: {
objectName: "dataCard",
propertyName: "fontFamily",
},
value: "wf_standard-font, helvetica, arial, sans-serif",
},
fontSize: {
descriptor: {
objectName: "dataCard",
propertyName: "fontSize",
},
value: 20,
},
bold: {
descriptor: {
objectName: "dataCard",
propertyName: "fontBold",
},
value: false,
},
italic: {
descriptor: {
objectName: "dataCard",
propertyName: "fontItalic",
},
value: false,
},
underline: {
descriptor: {
objectName: "dataCard",
propertyName: "fontUnderline",
},
value: false,
},
},
},
},
{
displayName: "Font Color",
uid: "dataCard_dataDesign_fontColor_slice",
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "dataCard",
propertyName: "fontColor",
},
value: { value: "#01B8AA" },
},
},
},
],
};
}
const xAxisFormattingGroup = createAxisFormattingGroup("X-Axis---", "x-AxisFormatting_uid");
dataCard.groups.push(xAxisFormattingGroup);
const formattingModel: powerbi.visuals.FormattingModel = { cards: [dataCard] };
return formattingModel;
}
objects in capabilities.json file for formatting pane:
"objects":{
"dataCard": {
"properties": {
"fontSize": {
"type": {
"formatting": {
"fontSize": true
}
}
},
"fontFamily": {
"type": {
"formatting": {
"fontFamily": true
}
}
},
"fontBold": {
"type": {
"bool": true
}
},
"fontUnderline": {
"type": {
"bool": true
}
},
"fontItalic": {
"type": {
"bool": true
}
},
"fontColor": {
"type": {
"fill": {
"solid": {
"color": true
}
}
}
}
}
},
"xAxisFormatting": {
"displayName": "X-Axis Formatting",
"properties": {
"fontFamily": {
"displayName": "Font Family",
"type": { "text": true }
},
"fontSize": {
"displayName": "Font Size",
"type": { "numeric": true }
},
"fontColor": {
"displayName": "Font Color",
"type": { "fill": { "solid": { "color": true } } }
}
}
}
}
my xAxis label is in visual.ts file is :
const xAxisLabels = this.xAxisGroup
.attr('transform', 'translate(0,' + chartHeight + ')')
.call(axisBottom(xScale).ticks(5))
.selectAll('text')
setting.ts file:
setting.ts:
export class VisualFormattingSettingsModel extends FormattingSettingsModel {
xAxisLabelFormatting: {
fontFamily: any;
fontSize: any;
fontColor: any;
};
}
Please help me in the implemetation of formatting pane for x axis label.
Thank You!
#customvisual @dm-p @WZorn
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @AakashMarasini,
I've done limited work with the formatting model, but my understanding is that you would need to pass your current visual settings into your createAxisFormattingGroup function so that you can sub them in to where you are currently hard-coding them.
If your settings are available at the class level (and assuming they are scoped as this.settings), you could probably get away with the following:
function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
return {
displayName: displayName,
uid: uid,
slices: [
{
uid: "data_font_control_slice_uid",
displayName: "Font",
control: {
type: powerbi.visuals.FormattingComponent.FontControl,
properties: {
fontFamily: {
descriptor: {
objectName: "dataCard",
propertyName: "fontFamily",
},
value: this.settings.dataCard.fontFamily,
},
fontSize: {
descriptor: {
objectName: "dataCard",
propertyName: "fontSize",
},
value: 20,
},
bold: {
descriptor: {
objectName: "dataCard",
propertyName: "fontBold",
},
value: this.settings.dataCard.fontBold,
},
italic: {
descriptor: {
objectName: "dataCard",
propertyName: "fontItalic",
},
value: this.settings.dataCard.fontItalic,
},
underline: {
descriptor: {
objectName: "dataCard",
propertyName: "fontUnderline",
},
value: this.settings.dataCard.fontUnderline,
},
},
},
},
{
displayName: "Font Color",
uid: "dataCard_dataDesign_fontColor_slice",
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "dataCard",
propertyName: "fontColor",
},
value: { value: this.settings.dataCard.fontColor },
},
},
},
],
};
}
In terms of making the function more portable, you might want to make the desired settings object a property of the function, so that you can refactor more easily, but the above implementation would probably work.
I'm not sure if it helps, but I have an implementation I'm working on that you might be able to crib from. It's not in my master branch as this release is still undergoing testing, but you should be able to see the source code as of this commit. Key parts for reference would be:
- My getFormattingModel function - you'll notice that I have declared a getFormattingCard method in each settings class that I use instead, as this allows me direct access to the settings values in that class.
- An example of a getFormattingCard method - I've chosen a class with a single property, as I have my own methods that I use to generate controls and a settings class with more properties might obfuscate things too much (but hopefully you can see that due to how it's scoped, it's easy to access the settings value from that class where I need it).
This is probably the limit of my current knowledge with the formatting cards, but hopefully some of it may help. Good luck!
Daniel
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you @dm-p for your quick response. While I used this.setting, it didn't work. So I have used
Thanks Again!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @AakashMarasini,
I've done limited work with the formatting model, but my understanding is that you would need to pass your current visual settings into your createAxisFormattingGroup function so that you can sub them in to where you are currently hard-coding them.
If your settings are available at the class level (and assuming they are scoped as this.settings), you could probably get away with the following:
function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
return {
displayName: displayName,
uid: uid,
slices: [
{
uid: "data_font_control_slice_uid",
displayName: "Font",
control: {
type: powerbi.visuals.FormattingComponent.FontControl,
properties: {
fontFamily: {
descriptor: {
objectName: "dataCard",
propertyName: "fontFamily",
},
value: this.settings.dataCard.fontFamily,
},
fontSize: {
descriptor: {
objectName: "dataCard",
propertyName: "fontSize",
},
value: 20,
},
bold: {
descriptor: {
objectName: "dataCard",
propertyName: "fontBold",
},
value: this.settings.dataCard.fontBold,
},
italic: {
descriptor: {
objectName: "dataCard",
propertyName: "fontItalic",
},
value: this.settings.dataCard.fontItalic,
},
underline: {
descriptor: {
objectName: "dataCard",
propertyName: "fontUnderline",
},
value: this.settings.dataCard.fontUnderline,
},
},
},
},
{
displayName: "Font Color",
uid: "dataCard_dataDesign_fontColor_slice",
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "dataCard",
propertyName: "fontColor",
},
value: { value: this.settings.dataCard.fontColor },
},
},
},
],
};
}
In terms of making the function more portable, you might want to make the desired settings object a property of the function, so that you can refactor more easily, but the above implementation would probably work.
I'm not sure if it helps, but I have an implementation I'm working on that you might be able to crib from. It's not in my master branch as this release is still undergoing testing, but you should be able to see the source code as of this commit. Key parts for reference would be:
- My getFormattingModel function - you'll notice that I have declared a getFormattingCard method in each settings class that I use instead, as this allows me direct access to the settings values in that class.
- An example of a getFormattingCard method - I've chosen a class with a single property, as I have my own methods that I use to generate controls and a settings class with more properties might obfuscate things too much (but hopefully you can see that due to how it's scoped, it's easy to access the settings value from that class where I need it).
This is probably the limit of my current knowledge with the formatting cards, but hopefully some of it may help. Good luck!
Daniel
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)

Helpful resources
Join our Fabric User Panel
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Power BI Monthly Update - June 2025
Check out the June 2025 Power BI update to learn about new features.

Subject | Author | Posted | |
---|---|---|---|
04-20-2025 07:52 PM | |||
06-04-2025 06:48 AM | |||
01-15-2025 11:37 PM | |||
05-04-2025 11:09 AM | |||
05-17-2025 09:54 AM |
User | Count |
---|---|
5 | |
2 | |
2 | |
1 | |
1 |