/ /

Configure Iframe Style and Theme

You can set dashboard options within an iframe by adding inline style tags and by adding query parameters to the dashboard URL. Inline style tags allow you to specify display options such as height, width, background color, and border width. Query parameters allow you to specify a light or dark display theme.

Configure Refresh and Data Caching Behavior

Use the autoRefresh query parameter to configure the dashboard to refresh automatically.

Use the maxDataAge query parameter to:

Determine the interval at which the dashboard refreshes if autoRefresh is true.
Configure the maximum age of data to load from the cache when loading or manually refreshing the dashboard if autoRefresh is false or omitted.

To learn how Atlas Charts loads data from the cache when loading or refreshing the dashboard based on the autoRefresh and maxDataAge values, see Refresh and Data Caching Behavior.

Use the options on the Unauthenticated tab on the Embed dashboard dialog to customize the autoRefresh value in the iframe snippet.

Refresh Example

The following iframe embeds a dashboard which automatically refreshes every 60 seconds as defined by the autoRefresh=true and the maxDataAge=60 query parameters:

<iframe style="border: none;border-radius: 2px;box-shadow: 0 2px
10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="
{charts-host}/embed/dashboards?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

Considerations

The minimum cache duration is 60 seconds. If autoRefresh is true and you specify a maxDataAge value that is less than 60, the dashboard refreshes every 60 seconds.
If you specify a maxDataAge value that isn't an integer or is less than -1, Charts returns an error.

Specify a Display Theme

Use the theme query parameter to select a display theme:

light: optimizes dashboard axes and text for presentation against a light or white background.
dark: optimizes dashboard axes and text for presentation against a dark or black background.

Choosing a theme value updates only the iframe snippet that you use to embed the dashboard in your application. The dashboard isn't saved with a theme value. The dashboard renders with the light theme by default. Embedded dashboards that don't include the theme parameter also render with the light theme.

Note

Choosing the light or dark theme doesn't change the color palette that dashboard data elements use. All bars and marks display using the default palette or the custom palette the dashboard author chooses.

For example, if you choose a dashboard bar to render in black, choosing the dark theme doesn't change the color of this bar to make it more visible against a dark background.

Customize Display Options

Atlas Charts adds inline style properties to the iframe snippet you copy from the UI. These inline style properties add a background color and a border with a box shadow to the embedded dashboard based on the theme you select:

light theme background: #F1F5F4
dark theme background: #12212C
border: none
border-radius: 2px
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2)
width: 640
height: 480

Change the values of the inline style properties to change how the embedded dashboard displays in your application.

Background Color

Change the value of the background property to any value supported by the background CSS property to display the dashboard against it. See background in the MDN Web Docs for more information.
Change the background property to transparent to display the dashboard with a transparent background, allowing your application's background to display through the dashboard.
Remove the background property to use the default background color of the theme you choose:
#F1F5F4 for the light theme (default), or
#12212C for the dark theme.

Dashboard Border

Modify or remove the following properties to customize or remove the dashboard border:

border
border-radius
box-shadow

Display Theme

You can change the value of the theme query parameter in the iframe snippet after you paste it into your application. If you do, you must adjust the iframe's inline style properties to match the theme you choose.

Display Theme Example

If you change the theme from light to dark, adjust the value of the background property in the iframe snippet to display the dashboard against a dark background.

Dashboard using light theme with default light theme background of #F1F5F4:

Dashboard displayed using the light theme with light theme style.

click to enlarge

Dashboard using dark theme with default dark theme background of #12212C:

Dashboard displayed using the dark theme with dark theme style.

click to enlarge

Iframe Example

The following iframe embeds a dashboard with the dark theme with the default dark theme inline style properties. The code is formatted for readability.

<iframe style="
background: #21313C;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/charts-crllr/embed/dashboards?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=dark
"></iframe>

Remove the MongoDB Logo

Use the attribution query parameter with a value of false to display your embedded dashboard without the MongoDB logo.

The following iframe snippet renders a dashboard that does not display the MongoDB logo:

<iframe
style="background: #FFFFFF;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/mongodb-charts-twsqq/embed/dashboards
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

Back

Embedded Dashboard SDK Methods and Options

Filter