Embedding Charts

EconDash offers interactive, responsive chart embeds for publishers, newsletter authors, economists, and researchers. Embeds update automatically as new macroeconomic data arrives and include source attribution back to primary institutions (World Bank, IMF, OECD, BIS, and national statistical offices).

<iframe src="https://econdash.org/embed/gdp-growth-annual-percent/USA" width="100%" height="400" style="border:0" loading="lazy" title="GDP Growth Rate — United States | EconDash"></iframe>
<p style="font-size:12px;color:#888;margin-top:6px">Source: <a href="https://econdash.org/chart/gdp-growth-annual-percent/USA" target="_blank" rel="noopener" style="text-decoration:underline">GDP Growth Rate of United States — EconDash</a> (data: World Bank)</p>

Overview of Embed Options

Ghost

Ghost supports both oEmbed automatic discovery and raw HTML cards.

Method 1: Automatic oEmbed (Easiest)

1. Copy the public chart URL (e.g. https://econdash.org/chart/gdp-growth-annual-percent/USA).
2. In the Ghost editor, paste the URL on a new blank line and press Enter.
3. Ghost queries EconDash's oEmbed endpoint (/api/oembed) and generates an interactive embedded widget.

Method 2: HTML Card (Custom sizing & parameters)

1. In the Ghost editor, type /html and press Enter to insert an HTML card.
2. Paste the embed code snippet:

<iframe src="https://econdash.org/embed/gdp-growth-annual-percent/USA" width="100%" height="400" style="border:0" loading="lazy" title="GDP Growth Rate — United States | EconDash"></iframe>
<p style="font-size:12px;color:#888;margin-top:6px">Source: <a href="https://econdash.org/chart/gdp-growth-annual-percent/USA" target="_blank" rel="noopener" style="text-decoration:underline">GDP Growth Rate of United States — EconDash</a> (data: World Bank)</p>

Note on Ghost Editor Behavior: For security reasons, Ghost disables scripts and external iframes inside the editing canvas. The chart will display in post preview mode and on the published article. See official Ghost Cards Documentation.

WordPress

WordPress supports embeds on both WordPress.com and self-hosted (WordPress.org) sites.

Method 1: Custom HTML Block (Gutenberg)

1. Add a Custom HTML block to your post or page.
2. Paste the iframe snippet:

<iframe src="https://econdash.org/embed/gdp-growth-annual-percent/USA" width="100%" height="400" style="border:0" loading="lazy" title="GDP Growth Rate — United States | EconDash"></iframe>
<p style="font-size:12px;color:#888;margin-top:6px">Source: <a href="https://econdash.org/chart/gdp-growth-annual-percent/USA" target="_blank" rel="noopener" style="text-decoration:underline">GDP Growth Rate of United States — EconDash</a> (data: World Bank)</p>

3. Click Preview in the block toolbar to verify that the chart renders properly.

Method 2: Native oEmbed in Self-Hosted WordPress

To enable automatic embedding when pasting a bare URL into a standard WordPress Embed block, register EconDash as an authorized oEmbed provider. Add this code to your theme's functions.php or a small custom plugin:

// Register EconDash as an oEmbed provider
wp_oembed_add_provider(
    'https://econdash.org/chart/*',
    'https://econdash.org/api/oembed',
    false // Pattern matching (regex or wildcard)
);

After adding this snippet, pasting https://econdash.org/chart/gdp-growth-annual-percent/USA directly into an Embed block converts into an interactive chart. Reference: WordPress wp_oembed_add_provider.

Substack

Substack has strict security limitations for newsletters sent via email: arbitrary <iframe> tags are not supported. Only built-in integrations (such as YouTube, Spotify, and X) are permitted.

The Solution: Dynamic Open Graph Card + Direct Link

EconDash generates real-time Open Graph snapshot images for every indicator and country at /api/og/chart/{indicator}/{country}. These images stay sharp on high-DPI displays and match the latest data points.

Option A: HTML / Markdown Snippet

<a href="https://econdash.org/chart/gdp-growth-annual-percent/USA" target="_blank" rel="noopener">
  <img src="https://econdash.org/api/og/chart/gdp-growth-annual-percent/USA" alt="GDP Growth Rate — United States | EconDash" width="100%" />
</a>
<p style="font-size:12px;color:#888;margin-top:6px">
  Source: <a href="https://econdash.org/chart/gdp-growth-annual-percent/USA">GDP Growth Rate of United States — EconDash</a> (data: World Bank)
</p>

Option B: Substack Visual Editor

1. In the Substack post editor, click the Image icon.
2. Provide the image URL: https://econdash.org/api/og/chart/gdp-growth-annual-percent/USA (or download the PNG from EconDash and upload it).
3. Click the image, select the Link icon, and paste the chart link: https://econdash.org/chart/gdp-growth-annual-percent/USA.
4. Add a caption with attribution: Source: EconDash / World Bank.

When newsletter subscribers click the chart in their email inbox, they navigate directly to the interactive interactive chart with full historical ranges and regional comparisons.

Medium

Medium processes external embeds via Embedly and Iframely.

1. Direct Link Preview: Paste the chart URL https://econdash.org/chart/gdp-growth-annual-percent/USA and press Enter. Medium generates a rich visual bookmark card using our Open Graph metadata.
2. Linked High-Resolution Image: Alternatively, upload or link the chart snapshot from https://econdash.org/api/og/chart/gdp-growth-annual-percent/USA and link it back to the interactive view on EconDash.

Notion

Notion allows embedding external web content directly into workspaces and public Notion sites.

1. In any Notion page, type /embed and select the Embed block.
2. Paste the EconDash embed URL:

https://econdash.org/embed/gdp-growth-annual-percent/USA?theme=auto

3. Click Embed link.
4. Resize the embed container horizontally and vertically to fit your page layout.

Setting theme=auto ensures that the chart matches the reader's Notion workspace theme (light or dark).

Telegram

Telegram chats and channels do not support executable iframes. Instead, Telegram displays an Open Graph preview card:

1. Paste any chart link into Telegram:

https://econdash.org/chart/gdp-growth-annual-percent/USA

2. Telegram fetches the metadata and displays:
   • Chart thumbnail snapshot with high contrast
   • Indicator title and country name
   • Current value, observation period, and source attribution
3. Updating cached previews: If Telegram displays an older preview after a data update, send the URL to Telegram's official @WebpageBot and tap Update preview to flush Telegram's link cache.

Custom Websites, React & Next.js

For static websites, CMS systems, or React/Next.js applications, use the standard iframe code.

URL Structure and Parameters

The base embed URL is:

https://econdash.org/embed/{indicator-slug}/{country-iso3}

Supported query parameters:

React / Next.js Component Example

interface EconChartProps {
  indicatorSlug: string;
  countryCode: string;
  theme?: "dark" | "light" | "auto";
  range?: "10y" | "max";
  height?: number;
}

export function EconChart({
  indicatorSlug,
  countryCode,
  theme = "auto",
  range = "max",
  height = 400,
}: EconChartProps) {
  const embedUrl = `https://econdash.org/embed/${encodeURIComponent(indicatorSlug)}/${encodeURIComponent(countryCode)}?theme=${theme}&range=${range}`;
  const chartUrl = `https://econdash.org/chart/${encodeURIComponent(indicatorSlug)}/${encodeURIComponent(countryCode)}`;

  return (
    <div className="w-full my-6">
      <iframe
        src={embedUrl}
        width="100%"
        height={height}
        style={{ border: 0 }}
        loading="lazy"
        title="Economic Indicator — EconDash"
      />
      <p style={{ fontSize: "12px", color: "#888", marginTop: "6px" }}>
        Source: <a href={chartUrl} target="_blank" rel="noopener" style={{ textDecoration: "underline" }}>View interactive chart on EconDash</a>
      </p>
    </div>
  );
}

Data Licenses and Permitted Use

EconDash respects data licenses from all source providers:

• Open Data (CC BY 4.0, Public Domain, Open Government License): Indicators from World Bank, IMF, OECD, BIS, Eurostat, and UN agencies are freely embeddable with attribution.
• Proprietary Datasets: Certain third-party datasets (such as Yahoo Finance quotes and S&P Case-Shiller indices) restrict third-party iframe embedding. If an embed is attempted for a restricted dataset, EconDash displays a branded notification directing readers to the interactive chart on EconDash. For complete details, see Data Licenses.