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

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
AdamWhittaker
Helper I
Helper I

Custom Visual - Display Units - Auto not working

Hello,

I installed the formatting utils from here:

https://github.com/microsoft/powerbi-visuals-utils-formattingutils

I added `

(to the capabilities.json)

 

 

"displayUnit": {
					"displayName": "Display Units",
					"description": "Specify display unit.",
					"type": {
						"formatting": {
							"labelDisplayUnits": true
						}
					}
				},

 

 

In the visual i added:

 

 

const formatter: IValueFormatter = valueFormatter.create({
                value: this.visualSettings.value.displayUnit,
                precision: this.visualSettings.value.measurePrecision,
                cultureSelector: "en-US"
            });

formatter.format(value);

 

 

 

This seems to work perfectly if i change the drop down to Thousands, Millions etc. but doesnt seem to do anything if i set it to auto.

 

I tried the same setting on the default MS Card and with auto set and the value changes to 119.42K but in my custom card it stays at 119416. If i set the dropdown to thousands in my custom card  it shows at 119.42k (like auto on the official card).

 

Is there something special I have to do in my code for the auto to work?
I believe auto sends back a value of 0 for this.visualSettings.value.displayUnit which doesnt seem to do anything and 1000 for thousands which works, the MS doc site for this also doesnt mention auto:

https://learn.microsoft.com/en-us/power-bi/developer/visuals/utils-formatting

 

Thanks,

 

Adam

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @AdamWhittaker,

It's been a while since I've looked into this (I've been looking for some code where I've resolved it that I could copy/paste in here but don't have anything to hand), so I'm working from memory (and hopefully it might be close to correct).

If you want auto formatting to work, I believe you'll need to substitute the measure value into the value property when displayUnit is 0, as this property represents the scale that Power BI needs to consider when formatting.

Based on your example, something like the following should work:

 

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit || value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

 

This change (on line 2) will coalesce the displayUnit (which would be 0 if auto) to the measure value, which would then be used to derive whether the value should be formatted as none, thousands, millions etc.

This would be equaivalent to:

 

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit !== 0 ? this.visualSettings.value.displayUnit : value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

 

Regards,

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)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

Hi @AdamWhittaker,

It's been a while since I've looked into this (I've been looking for some code where I've resolved it that I could copy/paste in here but don't have anything to hand), so I'm working from memory (and hopefully it might be close to correct).

If you want auto formatting to work, I believe you'll need to substitute the measure value into the value property when displayUnit is 0, as this property represents the scale that Power BI needs to consider when formatting.

Based on your example, something like the following should work:

 

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit || value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

 

This change (on line 2) will coalesce the displayUnit (which would be 0 if auto) to the measure value, which would then be used to derive whether the value should be formatted as none, thousands, millions etc.

This would be equaivalent to:

 

const formatter: IValueFormatter = valueFormatter.create({
    value: this.visualSettings.value.displayUnit !== 0 ? this.visualSettings.value.displayUnit : value,
    precision: this.visualSettings.value.measurePrecision,
    cultureSelector: "en-US"
});

formatter.format(value);

 

Regards,

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)




Thank you very much for the info, that worked great. Now i understand what the documentation was trying to communicate; their docs mention to pass 1001 for K and i just assumed it was a typo and they meant 1000 (which is mentioned lower down).. but they were just demonstrating that 1001 would automatically be converted for you (i think they should explain that)

 

Thanks again.

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

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

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.

Join our Fabric User Panel

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.