How to adjust Width and Height of dashboards in JavaScript embedding?

If you are experiencing an issue when embedding the dashboard, such as the dashboard getting cut at the ends of the screen, you can adjust the width and height of the embedding container using the height, width properties while initializing the embed. It should be noted that the dashboard height and width depend on the parent element of the embed container. The embed container inherits the height and width of the parent element and renders the dashboard. So, the parent element of the embed container must have an appropriate height and width to render the dashboard.

Here’s a step-by-step guide on how to adjust the dashboard height and width:

1. Locate the initialization code for the dashboard embed in your project.
2. Add the width and height properties to the BoldBI.create() function, and set the desired value for the width and height. For example, if you want to set the width to 1024 pixels and height to 700 pixels, you can use the following code:

var dashboard = BoldBI.create({
     embedContainerId: "container",
     width: "1024px",
     height: "700px"
});

You can also mention the width and height in percentage.

By following these steps, you should be able to adjust the width and height of the dashboard and prevent it from getting cut at the ends of the screen.

For more information on the width and height properties and other available options, please refer to the JavaScript API Reference.

Additional References

• Bold BI help documentation
• JavaScript Embedding
• Bold BI - Destroy Styles Method
• Bold BI - Add Styles Method