How do I embed an interactive chart in Squarespace?

To embed an interactive chart in Squarespace, paste its iframe into a Code Block (Add Block, then Code), or paste the chart's share URL into an Embed Block if the provider supports it. The Code Block route works for almost any chart that gives you an iframe, with one catch worth knowing before you start: iframes and JavaScript in Code Blocks are turned off on Squarespace's cheapest plan.

Embed Block vs Code Block

Squarespace gives you two ways in, and people mix them up. The Embed Block takes a URL and tries to expand it into rich content using oEmbed; it works cleanly for YouTube, Vimeo and a handful of supported services, but most charting tools are not on that list, so it often falls back to a plain link. The Code Block takes raw HTML, including the iframe tag a chart tool hands you, and renders it directly. For an interactive financial chart, the Code Block is almost always the right choice.

The plan catch

Here is the part most tutorials skip. Squarespace disables JavaScript and iframes in Code Blocks on the entry-level Personal plan; the feature is enabled on the Core, Plus, Advanced and Commerce plans. If your iframe shows up as empty space or a code preview rather than a live chart, the plan is the first thing to check, not your embed code. Squarespace renames its tiers periodically, but the dividing line sits between the cheapest plan and everything above it.

The steps

Open the page, click an insert point, and add a Code Block. Delete the placeholder HTML and paste the full iframe tag your chart tool gives you. Save, then use Preview rather than the editor to check it, since Code Block content sometimes renders only on the live view. If the chart appears and responds to hover and clicks, you are done.

Make it responsive

A raw iframe carries a fixed pixel width and height, so on a phone it overflows or gets clipped. The reliable fix is the padding-bottom aspect-ratio wrapper: put the iframe in a div whose height is set by percentage padding, then position the iframe to fill it.

<div style="position:relative;padding-bottom:62.5%;height:0;overflow:hidden;">
<iframe src="YOUR_CHART_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" loading="lazy"></iframe>
</div>

The 62.5% gives a 16:10 box; set it to 56.25% for 16:9. The iframe now scales with the column width on every screen. If your chart tool already offers a "responsive" copy of the embed code, use that instead, it does the same job.

The finance-specific part

For a financial or data chart, two extra things matter. Numbers need to stay legible when the iframe shrinks on mobile, so prefer a chart that reflows or simplifies at narrow widths over one that just scales the whole thing down into illegibility. And if the chart pulls live data, make sure it loads over HTTPS: Squarespace serves your site over HTTPS, and a mixed-content iframe will be blocked silently, leaving a blank box with no obvious cause.

[QUADESTO-EMBED: responsive interactive financial chart sized for a Squarespace column, legible on mobile, served over HTTPS, hover tooltips]

The Quadesto angle

Quadesto gives you a responsive HTTPS embed built for exactly this: a financial chart that stays readable when a Squarespace column narrows on a phone, pasted straight into a Code Block. The same embed drops into Webflow and WordPress the same way. The free tier includes a Made with Quadesto credit; Pro (£149 a month) removes it and adds branded themes.