My embedded charts are cut off or have too much space underneath.

The easiest way to embed visualizations created with Datawrapper is to use the Responsive iframe embed code that is provided in step 4: Publish once you have published your visualization:

You can copy & paste the responsive embed code into your website or CMS. It consists of two blocks:

• An iframe block: This contains your visualization itself
• A JavaScript block: This takes care of making sure your embed is responsive

The JavaScript block is crucial to make sure your embed will display correctly on both desktop and mobile devices, and must be included. 

What the JavaScript part does, and why it's there:

When you embed a Datawrapper graphic, it may need different amounts of vertical space depending on whether your readers access your article with a mobile device or a desktop computer.

For example, line breaks in the headline might result in the visualization taking up more space on mobile:

The JavaScript part of the embed code is there to ensure that the iframe is always the correct size, and isn't cut off on mobile, doesn't have scrollbars, and doesn't have too much white space underneath it on desktop.

It does this by adding an event listener that listens to messages from the iframe about the required height and adjusting it accordingly.

Why your charts are cut off / have too much space underneath

If you've noticed that your Datawrapper charts are cut off or have too much space underneath or that it has scrollbars, it's a good indication that the JavaScript is missing or not working. This might be because:

• Your CMS is stripping it out automatically
• Your CMS is making changes to the contents of the embed code, which are breaking the functionality

If you're noticing this behavior, we suggest you contact your CMS administrator or look into the alternative solution outlined in the section Working with Javascript restrictions in our developer docs.