Free on every plan

Interactive charts that look like they belong.

Paste one iframe into your product, docs, or CMS. What you publish there also works as a PNG for email and as editable layers in Figma.

Create a chartRead the embed docs
product.example.com/analytics
Live

Embedded chart

Hover the chart · Toggle a region

Embed code

<div style="aspect-ratio: 16 / 10; width: 100%">
  <iframe
    src="https://szum.io/e/abc123"
    title="Quarterly revenue by region"
    loading="lazy"
    style="width: 100%; height: 100%; border: 0"
  ></iframe>
</div>
One shared definition
The same document also renders the image and Figma asset.
Your product frame
Set the iframe ratio; the chart re-lays itself out inside it.
Same URL after edits
Replace the saved document without replacing the iframe.

How embedding works.

Three steps, and none of them involves writing chart code.

1

Publish a chart.

Save it in the web editor, the API, Figma, or through the MCP server. Publishing needs a free account.

2

Copy the snippet.

Share gives you the iframe code. Set the width and an aspect ratio, and the chart lays itself out inside.

3

Update it in place.

Publish changes and the same /e/{id} URL shows them. Unpublish or delete to take it down.

What viewers can do.

The chart stays quiet at rest. Interaction appears when someone needs a precise number or wants to focus on fewer series.

Read exact values

Hover a bar, dot, slice, or line for its tooltip. On multi-series lines and areas, the tooltip lists every visible series at that point.

Isolate a series

Legend items are real controls. Hide a series and the chart lays itself out again; the choice stays in that viewer’s browser.

Use touch

Scrub horizontally through the values on a phone or tablet. Vertical swipes still scroll the page.

Fit any container

The chart reads the iframe’s real size and lays out its axes and labels again, instead of shrinking a desktop rendering.

Embed or image?

Every published chart is both. Pick the form that suits where it is going.

Use the interactive embed when

  • The chart lives on a website, in a product, or in a CMS
  • Readers need exact values or want to compare series
  • The chart should follow each viewer’s light or dark mode
  • The page can load an iframe

Use a PNG or SVG when

  • The chart goes into an email, a PDF, a slide, or a Slack message
  • The destination cannot run JavaScript, like a social preview
  • You want one fixed rendering everywhere
  • You generate charts in bulk through the Image API

Free, fast, and light.

It adds nothing to your page’s code and nothing to your bill.

No payment, no card

Create a free account, publish a chart, and copy its embed URL. That is the whole setup, on every plan.

No chart library on your page

Szum loads inside the iframe. Your bundle, CSS, and build stay exactly as they are.

Cached at the edge

Responses stay cached for 24 hours. Each fresh one uses a render from your monthly allowance – 500 on Free. Cached views never count.

Light, dark, or the viewer’s choice

Set the chart’s appearance to System and the embed follows each viewer’s light or dark setting, live.

When to use something else.

Szum is a chart design system, not a dashboard framework or data-storytelling suite. That boundary is useful when it matches the job.

Choose Szum when

  • The same chart must work in a product, an image, and a Figma file
  • Consistent visual quality matters more than bespoke interaction
  • Backends and agents need a clear, predictable chart definition
  • An iframe boundary beats another visualization dependency in your application

Choose a library or publishing suite when

  • Your application must react to chart selections or cross-filter other views
  • You need direct database, spreadsheet, or scheduled data connectors
  • You need private charts that only signed-in viewers can open
  • The work depends on maps, scrollytelling, custom controls, or extensive animation

Limits, stated plainly.

The iframe is isolated and public by design. Know the boundary before it goes into a product.

Your page owns the frame

Set the iframe’s width and height or aspect ratio. Szum does not inject an auto-height script into the parent page.

A public capability URL

Anyone with the unguessable URL can load the chart. Private, signed-in embeds are not offered today.

No live data connection

The embed shows the published chart. Push new data by publishing again through the API, editor, or Figma.

Takedown timing

Unpublishing requests a cache purge. If a purge fails, a cached copy can last its cache lifetime, and open pages keep their chart until reloaded.

Attribution on Free

Free embeds use built-in themes and a small Szum credit. Creator and Pro remove the credit and keep custom themes.

Allowed on any site

Any site can put the /e/{id} URL in an iframe. The /v/{id} share page deliberately refuses, so keep it for links.

Interactive chart embed questions.

What matters before one goes into production.

How do I embed a chart in a website?
Publish a saved chart, copy its /e/{id} URL, and use it as the src of an iframe. Give the iframe a descriptive title plus a width and height or an aspect ratio. See the complete snippet in the embed documentation.
Does a Szum embed resize automatically?
The chart automatically re-lays itself out when its iframe dimensions change. Your page remains responsible for the iframe height or aspect ratio; Szum does not resize the parent frame for you.
Do embeds follow dark mode?
Yes. Set the chart’s appearance to System and the embed follows each viewer’s light or dark setting live. A chart set to Light or Dark keeps that appearance for everyone.
Can I update an embedded chart without changing the URL?
Yes. Replace the published document of the saved chart and its id, image URL, embed URL, and share URL remain the same. The embed does not poll live data by itself, so automated updates should publish a new document through the API.
Can I use a Szum embed for private data?
Not today. The opaque embed URL is a public capability: anyone who has it can load the chart. You can unpublish or delete the saved chart to revoke origin access.
Do embed views count toward my monthly renders?
A fresh embed response on a CDN cache miss consumes one render from the chart creator's monthly allowance. CDN hits and local interactions such as hover, touch, resizing, and legend toggles do not consume additional renders. Read the caching guide for the complete model.

Put your first chart on a page.

Start in the web editor – no account needed until you publish.

Create a chartRead the embed docs