how to give width and height in power bi report in embedding

Question

I am working on a react project and I implemented a power BI embed to show report and I am having a issue with the size of generating report in the UI. Here is the code for the Power BI Embed

 {selectedModel.AuthenticationMode !== null ? (
              <div className="iframe-container-powerbi">
                {generatedPowerBiToken && (
                  <PowerBIEmbed
                    embedConfig={{
                      type: "report",
                      id: generatedPowerBiToken.id,
                      embedUrl: generatedPowerBiToken.embedUrl,
                      accessToken: generatedPowerBiToken.accessToken,
                      tokenType: models.TokenType.Embed,
                      settings: {
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                          displayOption: models.DisplayOption.FitToPage,
                        },
                        panes: {
                          filters: {
                            expanded: true,
                            visible: true,
                          },
                        },
                        //background: models.BackgroundType.Transparent,
                      },
                    }}
                    eventHandlers={
                      new Map([
                        [
                          "loaded",
                          function () {
                            console.log("Report loaded");
                          },
                        ],
                        [
                          "rendered",
                          function () {
                            console.log("Report rendered");
                          },
                        ],
                        [
                          "error",
                          function (event) {
                            console.log(event.detail);
                          },
                        ],
                      ])
                    }
                    cssClassName={"report-style-class"}
                  />
                )}
              </div>
            ) : (
              <div className="iframe-container">
                <Iframe
                  url={ifActiveUrl}
                  width="100%"
                  height="100%"
                  id="modelIframe"
                  className="model-iframe"
                  display={ifUrlOpen ? "initial" : "none"}
                  position="relative"
                />
              </div>
            )}

and when I load a report UI is rendering like this

I need to increase the size of the chart and reduce the size of the space that noted with red color. can anyone suggest a solution ?

score 0 · Accepted Answer · answered Nov 24 '21 at 05:11

To resolve this issue, set the height and width manually in the iframe instead of using 100%.Please find the reference code below:

<iframe width="1080" height="520" src="Your_source_link" frameborder="0" allowFullScreen="true"></iframe>

My output with height and width as 100%:

After changing the height and width:

Please find more references here: How to determine a Power BI report's width and height for embedding

how to give width and height in power bi report in embedding

1 Answers1