Chart embeds for websites and apps

Embed a chart that looks like it belongs.

Paste one iframe for tooltips, touch, and legend controls. The same chart also renders as PNG or SVG and stays editable 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 config 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 config without replacing the iframe.

Your chart should not fork at the browser.

Most teams rebuild the same chart for product UI, generated images, and design files. szum keeps the data, visual rules, and theme in one definition.

Interactive in your product

Publish an /e/{id} URL and place it in an iframe. Tooltips, touch scrubbing, and legend controls run inside the embed without adding a chart library to your host bundle.

Rendered by your backend

Render the same definition as PNG or SVG in email, reports, documents, and social previews. The chart does not drift because a second renderer or theme was introduced.

Editable in Figma

Bring the chart into Figma as editable vector layers through the szum plugin. Product, engineering, and design work from the same visual system.

Interaction without a charting project.

The chart stays quiet at rest. Interaction appears when someone needs an exact value or wants to isolate a comparison.

Exact values on demand

Hover bars, dots, pies, and lines for a focused tooltip. Multi-series lines and areas show every visible series at the active position.

Series isolation

Legend items are real controls. Hide a series and the chart recomputes its layout; select it again to restore the view.

Mouse and touch

Hover with a pointer or scrub horizontally on touch. Vertical page scrolling remains available on mobile.

Container-aware layout

The chart observes the iframe dimensions and re-lays itself out instead of stretching a fixed desktop rendering.

No host chart runtime

szum loads inside the iframe boundary. Your application does not need renderer packages, theme CSS, or initialization code.

Stable after edits

Update the saved definition while keeping the same image, embed, and share URLs wherever they are already used.

A deliberately smaller kind of embed.

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 compact, predictable chart grammar.
  • An iframe boundary is preferable to 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, authenticated viewer access.
  • The work depends on maps, scrollytelling, custom controls, or extensive animation.

Create once. Publish without drift.

The definition can start with a person or an agent. Once saved, every public form is attached to the same chart id.

1

Author the definition

Create in the web editor, through the API or SDK, in Figma, or with an AI agent through the MCP server.

2

Publish one saved chart

Save and publish it from the editor, API, Figma, or MCP. Later edits in the editor, API, or Figma replace the published config without changing the id.

3

Use the right form

Use /e/{id} for the interactive embed, /c/{id} for an image, or /v/{id} for a shareable page.

Production details, stated plainly.

The iframe is intentionally isolated and public. Know the boundary before you put it into a product.

Your page owns the frame

Set the iframe width and height or aspect ratio. The chart responds inside it; szum does not inject an auto-height script into the parent page.

Public capability URL

Anyone with the opaque URL can load the chart. Private authenticated embeds are not offered today.

No direct live connection

The embed renders the published definition. Update it through the API, editor, or Figma rather than connecting the iframe to a database or spreadsheet.

Edge-cached delivery

Repeated loads can be served from the CDN. A cache-miss response consumes one render from the chart creator's allowance.

Interactions stay local

Hover, touch, resizing, and legend toggles run in the browser and do not consume additional renders.

Update or revoke

Replace the published config behind the same id, unpublish the chart, or delete it. szum requests a cache purge when public state changes.

Interactive chart embed questions.

The decisions that matter before you place a szum chart in production.

How do I embed an interactive 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.
Can I update an embedded chart without changing the URL?
Yes. Replace the published config 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 config 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.
How are interactive embed loads billed?
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.

Ship one chart, not three implementations.

Use the same designed definition in your product, your generated images, and your Figma file.

Create a chartRead the embed docs