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
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:
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
- Your CMS is stripping it out automatically
- Your CMS is making changes to the contents of the embed code, which are breaking the functionality