How to style embedded visualizations
Our visualization embeds support “render flags” to change the behavior of the embedded visualization. They can be used to enforce dark mode, disable all interactive elements, or hide the header and footer of a chart. Here's the list of all supported render flags:
| Flag | Example value | Description |
|---|---|---|
| dark | true, false, "auto" |
For enforcing/disabling the dark mode, or activating the automated dark mode |
| plain | true, false |
In plain mode, the visualization will be shown without the header and footer. |
| search | any text | Can be used to pre-fill the search box in visualizations that support search (currently only tables) |
| static | true, false |
In static mode, any interactive elements in the visualization will be disabled and links will show up as normal text. |
| logo | "on", "off" |
If your custom theme includes a logo, this flag can be used to force the logo to be shown or hidden |
| logoId | any text | If your theme defines multiple logos, you can use this flag to define which logo to show |
| transparent | true, false |
If set to true the visualization background will be set to transparent instead of the defined theme background. |
How to set render flags in embed codes?
You can set render flags by appending them as URL parameters in the HTML embed code:
<code><div><iframe src="https://datawrapper.dwcdn.net/ABCDE/5/?dark=true&logo=on" ...></iframe></div>