{"id":1014,"date":"2026-10-23T17:28:58","date_gmt":"2026-10-23T17:28:58","guid":{"rendered":"http:\/\/jfdi-blog-embed-responsive-chart-website"},"modified":"2026-10-23T17:28:58","modified_gmt":"2026-10-23T17:28:58","slug":"embed-responsive-chart-website","status":"publish","type":"post","link":"https:\/\/jfdi.pro\/blog\/embed-responsive-chart-website\/","title":{"rendered":"How to embed a responsive chart on your website"},"content":{"rendered":"\n

To embed a chart that resizes on phones, make it in the JFDI chart maker<\/a>, go to the Export<\/strong> step, and copy the Interactive<\/strong> 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.<\/p>\n\n\n\n

\n
Make a chart to embed<\/a><\/div>\n<\/div>\n\n\n\n

Interactive or static?<\/h2>\n\n\n\n

The Export step offers two kinds of embed:<\/p>\n\n\n\n

<\/th>Interactive<\/th>Static SVG<\/th><\/tr><\/thead>
Resizes to fit phones<\/td>Redraws for the width, so text stays readable<\/td>Shrinks like an image<\/td><\/tr>
Tooltips, filters, sliders, animation<\/td>Yes<\/td>No<\/td><\/tr>
Scripts<\/td>Yes: loads the free d3 library from cdnjs (Cloudflare)<\/td>None<\/td><\/tr>
Works where scripts are blocked<\/td>No<\/td>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Choose Interactive<\/strong> for most websites. Choose Static SVG<\/strong> for email newsletters, platforms that strip scripts, or pages where you don’t want any third-party request.<\/p>\n\n\n\n

There’s also Download as web page<\/strong>, which saves the chart as a standalone HTML file you can upload anywhere or send to someone.<\/p>\n\n\n\n

Where to paste it<\/h2>\n\n\n\n

WordPress<\/h3>\n\n\n\n

In the block editor, add a Custom HTML<\/strong> block (type \/html<\/code>) and paste the code. Use the block’s Preview<\/strong> 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.<\/p>\n\n\n\n

Squarespace<\/h3>\n\n\n\n

Add a Code<\/strong> block, paste the code, and make sure the display mode is set to HTML.<\/p>\n\n\n\n

Wix<\/h3>\n\n\n\n

Add an Embed HTML<\/strong> element (the menu names vary between Wix editors), choose Code<\/strong>, and paste. Wix shows embeds inside a frame, so drag the frame to the height you want.<\/p>\n\n\n\n

Plain HTML<\/h3>\n\n\n\n

Paste the code where the chart should appear. It takes the width of its container, so put it inside your normal article column.<\/p>\n\n\n\n

Why responsive matters<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Accessibility<\/h2>\n\n\n\n

Add a description for screen readers under Format \u203a Accessibility<\/strong>. Suggest a description<\/strong> 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.<\/p>\n\n\n\n

Privacy<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Maps too<\/h2>\n\n\n\n

The map maker<\/a> 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.<\/p>\n\n\n\n

Common questions<\/h2>\n\n\n\n

Will the chart update if I change my data?<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Is there a size limit?<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Can I use it commercially?<\/h3>\n\n\n\n

Yes, with no watermark and no credit required.<\/p>\n\n\n\n

Related<\/h2>\n\n\n\n