How do I embed an interactive chart in Framer?

To put an interactive chart into a Framer site, you use the Embed element: add it to the canvas, choose the HTML option, and paste the iframe your chart tool gives you. Framer renders that iframe directly, the same live chart your readers would see on the source site. The URL option works too when the provider supports it, but for a financial chart the HTML-iframe route is the one that reliably keeps the chart interactive.

Embed element: URL vs HTML

Framer's Embed element takes input two ways. Paste a URL and Framer tries to render the page or expand it into rich media; this is fine for services it recognises but often falls back to a plain preview for charting tools it does not. Switch the element to the HTML option and you can paste raw embed code, the iframe tag with its src pointing at your chart. For an interactive chart, use HTML. It renders the exact iframe the tool intends, with its own interactivity intact, rather than relying on Framer to recognise the service.

Size it, because the iframe will not

Here is the step that catches people. An iframe has no opinion about the box it lives in; it renders at the width and height you give it and no more. Drop one into a Framer Embed element without setting dimensions and you get a clipped chart or a stripe of empty space. Give the Embed element an explicit size on the canvas, then make it responsive: set the width to fill the container and pin a sensible aspect ratio or a minimum height so it holds shape on a phone. Framer's layout controls handle this once you tell them the frame is meant to stretch; the default assumption is that it is not.

If your chart tool offers a responsive embed snippet, one that carries its own aspect-ratio wrapper, paste that whole snippet into the HTML option rather than the bare iframe, and let it manage its own height. That is usually the cleanest result on Framer, because it moves the sizing logic inside the embed where the chart tool controls it.

The things that quietly break embeds

Three checks save most of the debugging. First, serve the chart over HTTPS; a published Framer site is HTTPS, and browsers block an insecure iframe inside a secure page, so an http src shows up as a blank box. Second, confirm the chart tool has not restricted its embed to a single allowed domain that excludes your Framer URL, or the frame will refuse to load. Third, remember the preview inside the Framer editor is not the published site, so always check an embed on the live URL, on desktop and on a phone, before you trust it.

The finance angle

For a marketing page, a static chart image is often enough. For anything that carries numbers a reader will act on, a fund page, an investor update, a data-led landing page, a live embed beats a screenshot, because the screenshot is stale the moment the data moves and a live chart is not. This is the same reason the WordPress and Squarespace embed routes matter: the platform is only half the job; the chart behind the iframe has to stay correct and legible at the size the layout gives it. A number that is right on your desktop and unreadable on a phone is still a failed embed.

[QUADESTO-EMBED: sample finance chart, e.g. a yield curve or rate-probability tree, shown live inside a Framer Embed element at full container width]

Quadesto builds finance-aware interactive charts, rate-probability trees, yield curves, volatility surfaces, performance panels, and hands you an iframe to drop into a Framer Embed element. Publish once and the embed stays live; when the underlying data updates, the chart on your Framer page updates with it. The free tier includes a Made with Quadesto credit on the embed; Pro (£149 a month) removes the attribution and adds branded themes so the chart matches the site around it.