Embedding Datawrapper Chart #3 in static image (feat. MD)

1 min read

Previously, in this article, I showed how to embed Datawrapper (opens in a new tab) chart using responsive iframe.

While, it's good to showcase an interactive chart to audience, it loads slowly compared to static image.

How to embed in static image?

Compared to embedding script, this is fairly easy.

First see the last script I used to embed responsive iframe in MDX.

import Script from 'next/script'
export const style = "width: 0; min-width: 100% !important; border: none;";
<iframe title="Weighted Sentiment Scores (Exchange)" aria-label="Dot Plot" id="datawrapper-chart-0bwFo" src="https://datawrapper.dwcdn.net/0bwFo/1/" scrolling="no" frameBorder="0" style={{style}} height="495"></iframe>
<Script src="http://datawrapper.dwcdn.net/lib/embed.min.js" />

For static image, it becomes one line with different href (obviously).

![](https://datawrapper.dwcdn.net/0bwFo/full.png)

How is it displayed in action?

Voilà!

CC BY-NC 4.0 © min park.RSS