Power bi scale up report view best practices

[jaryszek]

Hello,

what canvas size you are setting up for modern power bi report design? 

The LR (Low resolution, default one) is so small after embedding it using javascript SDK?

What is the best practice for it? 

Best,
Jacek

[DataNinja777 · Accepted solution]

Hi @jaryszek ,

For modern Power BI report design, especially when embedding with the JavaScript SDK, the best practice is to move away from the default low-resolution canvas. You should set your canvas to a 16:9 aspect ratio with a resolution of 1920 x 1080 pixels. This higher resolution ensures your report appears sharp and professional on modern displays and avoids the blurriness or excessive letterboxing that occurs when a small canvas is scaled up within an embedded iframe. It provides more space for well-designed visuals without feeling cramped.

When embedding your report, you need to configure the settings in your JavaScript code to ensure the report renders correctly within its container. Instead of relying on the default behavior, it's better to explicitly define the layout. Using models.LayoutType.Custom along with a displayOption of models.DisplayOption.FitToWidth is highly effective. This configuration scales the report to the full width of your container, eliminating horizontal empty spaces and providing a more integrated feel. If the report content is taller than the container, a vertical scrollbar will naturally appear, which is standard and intuitive for web users.

Here is a sample JavaScript code snippet demonstrating how to configure the embedding settings. This assumes you have already obtained the embedUrl, accessToken, and reportId from the Power BI service. The key is the settings object, where you define the layout behavior for a seamless integration into your application.

// Get a reference to the container element
let reportContainer = document.getElementById('reportContainer');

// Embed configuration used to describe the what and how to embed
// This object is used when calling powerbi.embed
let config = {
    type: 'report',
    tokenType: models.TokenType.Embed,
    accessToken: 'YourAccessTokenHere',
e   embedUrl: 'YourEmbedUrlHere',
    id: 'YourReportIdHere',
    permissions: models.Permissions.All,
    settings: {
        panes: {
            filters: {
                expanded: false,
                visible: true
            }
        },
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToWidth
        }
    }
};

// Embed the report and display it within the div container.
let report = powerbi.embed(reportContainer, config);

By combining a high-resolution 1920x1080 canvas in Power BI Desktop with this FitToWidth embedding configuration, you create a responsive and visually appealing experience. This approach ensures your reports look crisp and are properly scaled, providing the best view for your end-users regardless of their specific screen size, though you should always test the final embedded report on various devices to confirm the appearance.

Best regards,

[v-pnaroju-msft · Accepted solution]

Thankyou, @DataNinja777, for your response.

Hi jaryszek,

We appreciate your question on the Microsoft Fabric Community Forum.

From what I understand, the default Power BI canvas uses a Low Resolution size. This size was originally made for desktop use only. When you embed it in modern web apps, especially in full width containers, the canvas gets stretched. This causes the visuals to look pixelated or cramped.

Along with the response from @DataNinja777 , please follow these steps which might help fix the problem:

1. To avoid scaling issues, increase the report’s canvas size before publishing. Open the report in Power BI Desktop. Go to the View tab, then to Canvas Settings, and choose Custom. Set Width to 1920 px and Height to 1080 px.
2. Even when using FitToWidth layout, make sure the container div in your app uses flexible or responsive styling:
   #reportContainer {
   width: 100%;
   height: 100vh;
   max-width: 1920px;
   margin: auto;
   }
   This stops any forced scaling that may cause visual problems.

3. For best results, check the embedded report on different screen sizes like mobile, tablet, and desktop. Avoid using fixed size visuals that might overflow on smaller screens.
   
   

   Also, please see the following links:
   Embedding Basics · microsoft/PowerBI-JavaScript Wiki · GitHub
   Embed a report in Power BI embedded analytics | Microsoft Learn
   Report Layout in Power BI Embedded | Microsoft Learn
   
   

   We hope this information helps you fix the issue.
   If you have any more questions, please feel free to ask in the Microsoft Fabric community.

   Thank you.

   
   
   

[DataNinja777 · Accepted solution]

Hi @jaryszek ,

For modern Power BI report design, especially when embedding with the JavaScript SDK, the best practice is to move away from the default low-resolution canvas. You should set your canvas to a 16:9 aspect ratio with a resolution of 1920 x 1080 pixels. This higher resolution ensures your report appears sharp and professional on modern displays and avoids the blurriness or excessive letterboxing that occurs when a small canvas is scaled up within an embedded iframe. It provides more space for well-designed visuals without feeling cramped.

When embedding your report, you need to configure the settings in your JavaScript code to ensure the report renders correctly within its container. Instead of relying on the default behavior, it's better to explicitly define the layout. Using models.LayoutType.Custom along with a displayOption of models.DisplayOption.FitToWidth is highly effective. This configuration scales the report to the full width of your container, eliminating horizontal empty spaces and providing a more integrated feel. If the report content is taller than the container, a vertical scrollbar will naturally appear, which is standard and intuitive for web users.

Here is a sample JavaScript code snippet demonstrating how to configure the embedding settings. This assumes you have already obtained the embedUrl, accessToken, and reportId from the Power BI service. The key is the settings object, where you define the layout behavior for a seamless integration into your application.

// Get a reference to the container element
let reportContainer = document.getElementById('reportContainer');

// Embed configuration used to describe the what and how to embed
// This object is used when calling powerbi.embed
let config = {
    type: 'report',
    tokenType: models.TokenType.Embed,
    accessToken: 'YourAccessTokenHere',
e   embedUrl: 'YourEmbedUrlHere',
    id: 'YourReportIdHere',
    permissions: models.Permissions.All,
    settings: {
        panes: {
            filters: {
                expanded: false,
                visible: true
            }
        },
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToWidth
        }
    }
};

// Embed the report and display it within the div container.
let report = powerbi.embed(reportContainer, config);

By combining a high-resolution 1920x1080 canvas in Power BI Desktop with this FitToWidth embedding configuration, you create a responsive and visually appealing experience. This approach ensures your reports look crisp and are properly scaled, providing the best view for your end-users regardless of their specific screen size, though you should always test the final embedded report on various devices to confirm the appearance.

Best regards,