Custom Visual - Font size showing in percentage

[SonaliDhotre]

In Formatting options I am getting the font size as a percentage however I want it to show px(pixel).

Here are the capabilities:

"objects": {
        "formatOptions": {
            "displayName": "Format Options",
            "properties": {
                "categoryTextSize": {
                    "displayName": "Category Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "catDetailsTextSize": {
                    "displayName": "Category Details Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "cardTitleTextSize": {
                    "displayName": "Report Title Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "detailsTextSize": {
                    "displayName": "Report Details Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                }
            }
        }
    }

Can anyone please help me with this?
Thanks in advance.

[dm-p]

Hi @SonaliDhotre,

The unit suffix in these boxes is pre-defined. This will sometimes be set to something particular if the property name matches a reserved name (although there's no list of these and as you haven't supplied your capabilities, this is merely a guess that it's happening in this case).

If you want to use font size "correctly" in Power BI visuals, and have a unit suffix in the spin control, you will need to work in pt and apply styling using this unit in your code as applicable when binding property values to your appropriate styles. There is a special format type for this called fontSize you need to set in your capabilities.json, e.g.:

                ...
                "categoryFontSize": {
                    "displayName": "Category Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                ...

Then you'll get a box like the following when then pane is enumerated:

This type has in-built ranges of 8 - 60, and is consistent with other visuals.

If you want to use px, you can configure your property in capabilities to use the integer format type, e.g.

                ...
                "categoryFontSize": {
                    "displayName": "Category Font Size (px)",
                    "type": {
                        "integer": true
                    }
                },
                ...

Note that because this type doesn't present a suffix in the spin control, I've stated the unit in the displayName for UX purposes, but up to you how you want to manage.

Integer fields will not render correctly in the properties pane, unless you specify their min/max ranges when enumerating your visual objects - usually done in enumerateObjectInstances(), when the visual's update method executes. When you process each object instance, you will need to add a validValues object with the ranges for each named property. For example, if you wanted the values for categoryFontSize to be between 2 and 150, you'd do the following:

instances[0].validValues = {
    categoryFontSize: {
        numberRange: {
            min: 2,
            max: 150
        }
    }
}

Regards,

Daniel

[SonaliDhotre]

Thank you so much for responding. I have added the capabilities you have mentioned in the first half of the solution. I have added the capabilities in the description above. I am fine with having pt instead of px. But I am getting %. I am willing to go with the first solution you have mensioned. Can you please tell me what I am doing wrong?

[dm-p]

It's hard to help further without seeing your visual project; your capabilities.json file as a bare-minumum. Are you able to share this at all?

Also, please confirm the version of the API you're using and the SDK version (powerbi-visuals-tools).

[SonaliDhotre]

Here is the entire capebilities.json

{
    "dataRoles": [
        {
            "displayName": "Category",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "IsLive",
            "name": "islive",
            "kind": "Grouping"
        },
        {
            "displayName": "CatId",
            "name": "catid",
            "kind": "Grouping"
        },
        {
            "displayName": "Has Only One Report ?",
            "name": "hasOnlyOneReport",
            "kind": "Grouping"
        },
        {
            "displayName": "ReportId",
            "name": "reportid",
            "kind": "Grouping"
        },
        {
            "displayName": "Index",
            "name": "id",
            "kind": "Grouping"
        },
        {
            "displayName": "Header",
            "name": "header",
            "kind": "Grouping"
        },
        {
            "displayName": "Details",
            "name": "details",
            "kind": "Grouping"
        },
        {
            "displayName": "IconURL",
            "name": "icon-url",
            "kind": "Grouping"
        },
        {
            "displayName": "HoverURL",
            "name": "hover-url",
            "kind": "Grouping"
        },
        {
            "displayName": "CategoryImgURL",
            "name": "cat-img-url",
            "kind": "Grouping"
        },
        {
            "displayName": "CategoryDetails",
            "name": "cat-details",
            "kind": "Grouping"
        },
        {
            "displayName": "CategoryIllustration",
            "name": "cat-illustration",
            "kind": "Grouping"
        },
        {
            "displayName": "Target",
            "name": "target",
            "kind": "Grouping"
        }
    ],
    "objects": {
        "formatOptions": {
            "displayName": "Format Options",
            "properties": {
                "categoryTextSize": {
                    "displayName": "Category Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "catDetailsTextSize": {
                    "displayName": "Category Details Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "cardTitleTextSize": {
                    "displayName": "Report Title Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "detailsTextSize": {
                    "displayName": "Report Details Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                }
            }
        }
    },
    "dataViewMappings": [
        {
            "table": {
                "rows": {
                    "select": [
                        {
                            "for": {
                                "in": "category"
                            }
                        },
                        {
                            "for": {
                                "in": "islive"
                            }
                        },
                        {
                            "for": {
                                "in": "catid"
                            }
                        },
                        {
                            "for": {
                                "in": "hasOnlyOneReport"
                            }
                        },
                        {
                            "for": {
                                "in": "reportid"
                            }
                        },
                        {
                            "for": {
                                "in": "id"
                            }
                        },
                        {
                            "for": {
                                "in": "header"
                            }
                        },
                        {
                            "for": {
                                "in": "details"
                            }
                        },
                        {
                            "for": {
                                "in": "icon-url"
                            }
                        },
                        {
                            "for": {
                                "in": "hover-url"
                            }
                        },
                        {
                            "for": {
                                "in": "cat-img-url"
                            }
                        },
                        {
                            "for": {
                                "in": "cat-details"
                            }
                        },
                        {
                            "for": {
                                "in": "cat-illustration"
                            }
                        },
                        {
                            "for": {
                                "in": "target"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

And the API version is as shown in screenshot below,

Correct me if you need other details and let me know if you need to know anything else.

[ewaghabi]

I had the same problem. It turns out the property name has to be EXACTLY "fontSize" for it to work. Like this:

            "properties": {
                "fontSize": {
                    "displayName": "Category Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },

In your case, the problem is that you would have many "fontSize" properties in the same object group, and this is not possible, so you'll might have to rearrange your options.

[ewaghabi · Accepted solution]

I had the same problem. It turns out the property name has to be EXACTLY "fontSize" for it to work. Like this:

            "properties": {
                "fontSize": {
                    "displayName": "Category Font Size",
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },

In your case, the problem is that you would have many "fontSize" properties in the same object group, and this is not possible, so you'll might have to rearrange your options.