Can I get rid of the grey border on the report visuals with power bi embedded

Question

Can I get rid of the grey border i get when i render report visuals with power bi embedded? If so, how?

Answer 1

You can do the following to make the background transparent and also Fit To Width.

                var embedConfig = {
                    type: type,
                    id: id,
                    embedUrl: embedUrl,
                    viewMode: getViewModeFromModel(viewMode),
                    tokenType: models.TokenType.Aad,
                    accessToken: token,
                    pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                    pageName: pageName,

                    // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                    settings: {
                        filterPaneEnabled: true,
                        navContentPaneEnabled: true,
                        background: models.BackgroundType.Transparent,
                        // START Report specific settings
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                            displayOption: models.DisplayOption.FitToWidth
                        }
                        // END Report specific settings
                    }
                }

Answer 2

It's just a simple css code to remove border from generated iframe by powerbi. It worked perfectly for me

<style>
  iframe {  border: none; }
</style>

Comments

how do you do that if you're using the embed config?

---

Hey, @Binh,

For a transparent background, you can use the embed config:

By default, the report background is white with gray margins. If the default background does not look good into your application, use transparent background settings as follows:

let embedConfig = {
    ...
    settings: {
	background: models.BackgroundType.Transparent
    }
};

This way, You can give any style you want to the container div element, the report background will be transparent and the container div element will appear.

I hope this explanation will help you.

---

Thanks for the reply! I tried that and it keep through this error "Uncaught ReferenceError: models is not defined". Is "models" suppose to be an instant that I need to create, if so, what is models an instant of? Fyi, I have the embed config in a visualforce page and added the PBI Javascript library as a static resource for that page.