To embed a chart that resizes on phones, make it in the JFDI chart maker, go to the Export step, and copy the Interactive embed code. Paste it into an HTML block on your page. The chart redraws to fit the width it’s given, keeps its tooltips, and needs no account or hosting on our side.
Interactive or static?
The Export step offers two kinds of embed:
| Interactive | Static SVG | |
|---|---|---|
| Resizes to fit phones | Redraws for the width, so text stays readable | Shrinks like an image |
| Tooltips, filters, sliders, animation | Yes | No |
| Scripts | Yes: loads the free d3 library from cdnjs (Cloudflare) | None |
| Works where scripts are blocked | No | Yes |
Choose Interactive for most websites. Choose Static SVG for email newsletters, platforms that strip scripts, or pages where you don’t want any third-party request.
There’s also Download as web page, which saves the chart as a standalone HTML file you can upload anywhere or send to someone.
Where to paste it
WordPress
In the block editor, add a Custom HTML block (type /html) and paste the code. Use the block’s Preview tab to check it. Some hosted WordPress plans and some security plugins remove scripts from posts; if the chart doesn’t appear, use the Static SVG embed instead.
Squarespace
Add a Code block, paste the code, and make sure the display mode is set to HTML.
Wix
Add an Embed HTML element (the menu names vary between Wix editors), choose Code, and paste. Wix shows embeds inside a frame, so drag the frame to the height you want.
Plain HTML
Paste the code where the chart should appear. It takes the width of its container, so put it inside your normal article column.
Why responsive matters
A chart designed at 960 pixels wide and simply shrunk to a 375-pixel phone screen has its text cut to about 40% of its size, which is unreadable. The interactive embed redraws the chart at the phone’s width instead, so the text stays at a readable size. It redraws again if the window is resized.
Accessibility
Add a description for screen readers under Format › Accessibility. Suggest a description writes a first draft from the title and the data (for example the highest value and the overall trend), and the description is built into both kinds of embed. Write it to say what the chart shows, not what kind of chart it is.
Privacy
Your data is built into the embed code itself. Nothing is stored on our servers, so there’s no account to keep paying for and no chart that disappears if a service shuts down. The trade-off is that anyone who views the page source can see the data, so don’t embed anything you wouldn’t publish.
The interactive embed loads the d3 drawing library from cdnjs, a public library host run by Cloudflare, which means visitors’ browsers make one request to it. If that matters for your site, use the Static SVG embed.
Maps too
The map maker has embed code of its own. Map embeds are completely self-contained: everything, including the boundaries, is in the code, and nothing loads from anywhere else.
Common questions
Will the chart update if I change my data?
No. The embed holds a copy of the data from when you made it. To update it, change the chart and paste the new code over the old one.
Is there a size limit?
The chart maker shows the size of the code next to the copy buttons. Charts with a few thousand data points are fine; very large datasets make long code, and some editors are slow with that.
Can I use it commercially?
Yes, with no watermark and no credit required.