How to embed charts
Once you hit the big blue "Publish" button in step 4: Publish of the map or chart creation process, you see this:
In this article, we will explain these options in detail and answer some questions you might have:
Share via URL
Here you have two options, "fullscreen" and "normal size". The URLs that you see here are for sharing your chart, not for embedding it.
- Choose "fullscreen" if you want to share a fullscreen version of your chart. It will probably look stretched. Example: //datawrapper.dwcdn.net/Wa2Ci/16/
- Choose "normal size" if you want to link to a page on which the chart appears with your chosen height and width. That's great for social media or for showing the chart to a co-worker before embedding it. Example: https://www.datawrapper.de/_/Wa2Ci/
👉 You will notice that the fullscreen links show a trailing number, e.g. the 16 here: //datawrapper.dwcdn.net/Wa2Ci/16/. This is the versioning number. Every time you hit "Re-publish", this number counts up.
However, the charts in all versions are the same. The link //datawrapper.dwcdn.net/Wa2Ci/10/ shows the same chart as the link //datawrapper.dwcdn.net/Wa2Ci/3 or the link ://datawrapper.dwcdn.net/Wa2Ci/ . They all forward eventually to the latest version of the chart, which, in our case, is //datawrapper.dwcdn.net/Wa2Ci/16/.
Share or embed the version-numbered chart URL if you want to make sure that users on your website see the latest version of your chart immediately. Why? Because if someone had opened your article before and you did not update the chart URL, they might see an outdated ("cached") version of the chart. Also, it might take a small amount of time on our site to update the chart in all chart URLs.
Copy Embed code
Here you have two options, "responsive iframe" and "iframe".
- Choose "responsive iframe", if you want readers to see a version of a chart that's adapted to their screen size. Here's an example: On a mobile phone, the headline normally breaks into two or more lines; taking up more space within the iframe. The responsive iframe will become taller to avoid that your chart gets squeezed or cut off.
- Choose "iframe" if your CMS doesn't allow you to embed iframes with Javascript scripts attached to them.
👉 Both responsive iframe and iframe include the size of your chart. Meaning, they tell your website in which format ratio they should display the chart (more wide than tall? taller than wide? square?). If you change the size of your chart, make sure to copy a new embed code in your article or CMS.
If you're interested in the details: The responsive iframe is like the i
<iframe src="//datawrapper.dwcdn.net/Wa2Ci/16/" scrolling="no" frameborder="0" allowtransparency="true" width="1100" height="400"></iframe>
And here's how the responsive iframe looks like:
<iframe id="datawrapper-chart-Wa2Ci" src="//datawrapper.dwcdn.net/Wa2Ci/16/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="400"></iframe>
<script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["Wa2Ci"]={},window.datawrapper["Wa2Ci"].embedDeltas={"100":543.1666660000001,"200":465.166666,"300":425.166666,"400":425.166666,"500":400.166666,"700":400.166666,"800":400.166666,"900":400.166666,"1000":400.166666},window.datawrapper["Wa2Ci"].iframe=document.getElementById("datawrapper-chart-Wa2Ci"),window.datawrapper["Wa2Ci"].iframe.style.height=window.datawrapper["Wa2Ci"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["Wa2Ci"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("Wa2Ci"==b)window.datawrapper["Wa2Ci"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>