How to Embed Financial Charts

An iframe (inline frame) is a standard HTML element that loads an external web page inside a rectangular area on your page. When you embed a Quadesto chart, the iframe points to a public URL on Quadesto's servers that renders the chart in isolation — no navigation chrome, no sidebars, just the visualization itself. The browser treats it as a self-contained window embedded within your content.

The embed code is a single line of HTML. It looks like this:

You copy this snippet from Quadesto's share dialog and paste it into whatever editor your publishing platform provides. The chart loads immediately and stays current — every page view fetches the latest data from the underlying data source, whether that is FRED, Alpha Vantage, a custom API, or a static CSV you uploaded.

One of the challenges with iframe embeds is height management. A chart's natural height depends on its type, the number of data points, and whether legends or annotations are visible. Hardcoding a fixed pixel height leads to either wasted whitespace or clipped content. Quadesto solves this with a postMessage auto-resize protocol. The embedded chart measures its own rendered height after each data load and layout pass, then sends a message to the parent page via the browser's window.postMessageAPI. A small listener script on the parent page receives this message and adjusts the iframe's height attribute to match. The result is a seamless, gap-free embed that adapts to the chart's content without manual tuning.

For publishers who want zero-configuration embeds, Quadesto's default embed snippet includes the resize listener inline. You paste one block of code and everything works. For advanced users who manage their own resize logic — for example, in a React or Vue application — the raw iframe URL is available separately, and the postMessage event format is documented so you can handle resizing in your own code.

Substack does not support custom iframe embeds. The editor strips out iframe tags and arbitrary HTML when you publish. This is a deliberate restriction on Substack's part — their editor only allows a curated set of embed providers (YouTube, Twitter, Spotify, etc.), and custom iframe URLs are not on that list. This means you cannot paste Quadesto's iframe embed code directly into a Substack post and expect it to render.

The workaround is straightforward: export your chart as a high-resolution PNG and insert it as an image. Quadesto's export panel lets you choose between 1x, 2x, and 3x pixel density. For Substack, 2x is the recommended setting. At 2x, a chart with a logical width of 680 pixels (Substack's content column width) renders as a 1360-pixel-wide image, which looks crisp on both standard and Retina displays. Use 3x if your audience skews heavily toward high-DPI mobile devices or if you want the image to hold up when readers pinch-to-zoom.

The workflow is: open your chart in Quadesto, click the export button, select PNG at 2x, download the file, then drag it into the Substack editor where you want the chart to appear. You can add a caption below the image linking to the live interactive version on Quadesto, so readers who want to hover for data points or zoom into specific date ranges can click through.

If your chart updates frequently — for example, a daily yield curve or a weekly equity performance comparison — you will need to re-export and re-upload the PNG each time the data changes. This is the main trade-off of the static image approach. For charts backed by slowly changing data (quarterly earnings, annual macro trends), a single export is usually sufficient.

Ghost fully supports iframe embeds through its HTML card. The Ghost editor uses a block-based system where each content block is a "card." The HTML card accepts arbitrary HTML, including iframes, scripts, and inline styles. This makes Ghost one of the most embed-friendly newsletter and blog platforms available.

The workflow is: in the Ghost editor, click the + button to add a new card, select HTML from the card menu, and paste your Quadesto embed code into the HTML editor. The code renders immediately in the editor preview, and it carries through to the published page with no modification. The embedded chart is fully interactive — hover tooltips, zoom, pan, and live data updates all work as expected.

Ghost also respects the postMessage auto-resize protocol, so the iframe height adjusts dynamically based on the chart content. If your Ghost theme uses a constrained content width (most do, typically between 680px and 740px), the chart will fill the available width and scale its height proportionally. No additional CSS or theme customization is required.

One consideration: Ghost's email newsletter delivery pipeline strips iframes from the email version of your post. Subscribers who read your post via email will not see the embedded chart. To handle this gracefully, include a fallback image or a text note with a link to the web version. Alternatively, export a PNG at 2x from Quadesto and insert it as a regular image card above or below the HTML card, then use Ghost's visibility controls to show the image only in email and the interactive embed only on the web.

Beehiiv supports custom HTML blocks that accept iframe embeds. The process is similar to Ghost: in the Beehiiv editor, add a Custom HTML block, paste your Quadesto embed code, and the chart renders inline in your newsletter or publication page.

Beehiiv's web reader displays the full interactive chart with tooltips, zoom, and live data. The embed code's auto-resize mechanism works within Beehiiv's content container, so the chart fills the available width and adjusts its height automatically.

Like Ghost, Beehiiv's email delivery strips interactive elements. Subscribers who open your newsletter in their email client (Gmail, Apple Mail, Outlook) will not see the iframe. Beehiiv renders the email version as static HTML, and iframes are removed during that process. The recommended approach is to also include a PNG fallback — export at 2x from Quadesto and add it as a standard image block. You can link the image to the live view URL so readers can tap through to the interactive version.

For the web version of your Beehiiv publication (the hosted blog), the interactive embed works without any fallback needed. If your primary distribution channel is the web archive rather than email, iframes are the better choice because they stay current with live data.

Webflow supports embed elements that accept arbitrary HTML, including iframes. In the Webflow Designer, add an Embed element from the Add panel (shortcut: A), paste your Quadesto embed code into the code editor, and the chart renders on the canvas and in the published site.

Webflow's embed element sits within the page's layout flow, so it respects the container width, grid columns, and responsive breakpoints you define in the Designer. The iframe's width: 100% declaration ensures the chart fills whatever container you place it in — a full-width section, a two-column grid cell, or a sidebar widget.

For responsive behavior, the postMessage auto-resize handles height adjustments at each breakpoint. If you prefer manual control, you can wrap the embed element in a div with a fixed aspect ratio using Webflow's native styling tools (e.g., padding-bottom percentage trick) and set the iframe to fill the container with absolute positioning. This gives you pixel-perfect control over how the chart appears at desktop, tablet, and mobile breakpoints.

Webflow sites are static HTML/CSS/JS after publishing, so there is no server-side processing that might strip or modify your embed code. What you paste in the Designer is exactly what ships to production. This makes Webflow one of the most reliable platforms for Quadesto embeds.

WordPress supports iframe embeds through its Custom HTML block. In the Gutenberg block editor, add a Custom HTML block, paste your Quadesto embed code, and switch to the Preview tab to confirm the chart renders correctly. When you publish or update the post, the embed appears on the live page.

If you are using the classic editor (TinyMCE) rather than Gutenberg, switch to the Text tab (as opposed to Visual) and paste the embed code directly. The Visual tab may strip or mangle iframe attributes, so always use the raw HTML editing mode.

Some WordPress security plugins and hosting providers filter iframes from post content as a cross-site scripting (XSS) precaution. If your embed is being stripped on save, check whether a plugin like Wordfence or Sucuri is sanitizing post HTML. You can whitelist Quadesto's domain (www.quadesto.com) in the plugin's settings, or use a dedicated iframe/embed plugin that provides a shortcode wrapper. The shortcode approach — [quadesto id="YOUR_VIEW_ID"] — is also supported if you install the Quadesto WordPress plugin, which handles iframe insertion, responsive sizing, and CSP headers automatically.

WordPress.com (the hosted version, as opposed to self-hosted WordPress.org) has tighter HTML restrictions on its free and Personal plans. Business and eCommerce plans allow custom HTML with iframes. If you are on a lower-tier WordPress.com plan, use the PNG export workflow instead.

Notion supports embed blocks that load external URLs in an iframe. To embed a Quadesto chart in Notion, type /embed in any Notion page, paste the public view URL (e.g., https://www.quadesto.com/v/YOUR_VIEW_ID), and the chart loads inline within the Notion page.

Notion's embed block renders the chart at a default size, but you can resize it by dragging the handles on the block. The chart remains interactive — hover tooltips and zoom work within the Notion embed. Because Notion uses its own iframe wrapper, the postMessage auto-resize may not take effect. You may need to manually adjust the block height to fit the chart content without clipping.

Notion embeds are visible to anyone who has access to the Notion page. If the page is shared publicly (via "Share to web"), viewers can interact with the chart without a Quadesto account. If the page is private, only workspace members with page access can see the embed. The chart itself must be published as a public view in Quadesto for the Notion embed to load.

For Notion databases and wikis used as team dashboards, embedding live Quadesto charts is an effective way to keep financial data visible without requiring team members to switch between tools. Each chart updates automatically with fresh data on every page load.

Quadesto embeds are designed to be fully responsive out of the box. The embed code sets the iframe width to 100%, which means the chart fills whatever container it is placed in — a narrow blog column, a full-width landing page section, or a card in a multi-column dashboard layout. The chart reflows its internal layout (axis labels, legend position, data point density) based on the available width.

Height is the trickier dimension. Different chart types have different natural heights. A simple line chart with one series might need 400 pixels. A candlestick chart with volume bars, Bollinger Bands, and a legend might need 700 pixels. A volatility surface rendered as a 3D mesh might need even more. Hardcoding a fixed height leads to either excess whitespace below short charts or clipped content on tall charts.

Quadesto solves this with a postMessage resize protocol. Here is how it works: after the embedded chart finishes rendering (including any asynchronous data fetching and layout computation), it measures its own scrollHeight and sends a message to the parent window using the browser's window.postMessageAPI. The message payload includes the chart's origin domain and the desired height in pixels. A listener script on the parent page receives this message, validates the origin, and sets the iframe's height to the reported value.

Quadesto's default embed snippet includes this listener script inline, so publishers who paste the full embed block get auto-sizing with zero configuration. For developers integrating embeds into custom applications, the raw iframe URL and the postMessage event schema are available separately. The event follows a simple format:

Your application listens for message events on the window, checks for event.data.type === "quadesto:resize", and updates the iframe element's style or attribute accordingly. This pattern works in any frontend framework — React state updates, Vue reactive properties, Svelte bindings, or plain DOM manipulation.

The resize event fires on initial load and again whenever the chart layout changes — for example, when a viewer toggles a series on or off, expands an annotation, or when the underlying data updates. This ensures the iframe height stays accurate throughout the session without any polling or manual intervention.

Not every platform supports iframes. Substack strips them. Email clients (Gmail, Outlook, Apple Mail) block them. Social media platforms (Twitter/X, LinkedIn) do not allow any embedded HTML in posts. For these channels, Quadesto provides static export options that produce standalone image and document files.

PNG export at 1x, 2x, and 3x — The most common static format. Quadesto renders the chart server-side at the specified pixel density and produces a downloadable PNG file. Use 1x for quick previews and internal Slack messages. Use 2x for newsletter images, blog posts, and social media — this is the sweet spot between file size and visual clarity on modern screens. Use 3x for print-quality output or when you need the image to withstand aggressive cropping and zooming. The export captures the chart exactly as it appears in the editor, including colors, fonts, legends, annotations, and grid lines.

PDF export — Produces a vector-quality document suitable for client reports, research papers, and archival. The PDF preserves text as selectable characters and uses vector paths for chart elements where possible, so it scales cleanly to any zoom level or print size. Axis labels, data points, and annotations remain crisp at any resolution.

Platform-specific presets— When you open the export panel, Quadesto suggests optimal settings based on common destinations. The Substack preset exports at 680px logical width at 2x (1360px actual) to match Substack's content column. The Twitter/X preset exports at 1200x675 pixels to match the platform's recommended image dimensions for cards. The email preset exports at 600px logical width at 2x (1200px actual) to fit standard email template widths. These presets save time by eliminating guesswork about dimensions and resolution.

For workflows that combine live embeds and static images — for example, a Ghost blog post with an interactive embed on the web version and a PNG fallback in the email version — you can generate both outputs from the same chart in a single session. The chart only needs to be configured once; the export panel provides all output formats simultaneously.