Charts you can paste anywhere

Every frame below is a live embed, not a picture of one. Each draws from data compressed into its own link, with no server call and nothing stored on our side. The snippet under each frame is the real thing: copy it, paste it into a page, and you have that chart.

Want one with your own numbers? Open the embed builder

Reading the gallery

The nine frames are not nine chart types for the sake of a grid. Each is there to show one decision you will have to make when you build your own, and the note above each frame says which decision it is.

The bar chart is the default answer for a category breakdown, and the one to copy first. Notice that it has no value axis at all: the numbers are written beside the bars, which is what makes it readable in a screenshot or on paper.
The line chart shows the grain rule. The caption says monthly totals because the date column spans a year, and if it spanned six weeks it would say daily. A chart that quietly rebuckets your data without telling you is a chart you cannot cite.
The donut is the one place on the page where the full categorical palette earns its keep, because the legend is the only thing separating the slices.
The dark area chart has its theme pinned. Useful when your page has no dark mode and you want the frame to look chosen rather than inherited.
The ember column chart is a palette swap, nothing more, and it is the honest way to make a frame sit inside a warm design without asking us for a hex code we would then have to validate for contrast.
The histogram uses the single-hue palette because a distribution has exactly one series and colouring the bins would be decoration.
The scatter puts a correlation coefficient into the sub-caption, along with the word strong, moderate or weak, so nobody has to squint at a cloud and guess.
The median bar chart is the argument for having medians at all. Support resolution times have a long tail, and the mean of that tail describes a ticket nobody ever filed.
The table embed is the escape hatch for when a picture is the wrong format and you want the numbers themselves, right aligned and formatted by role.

Practical notes before you paste one

An embed is a piece of somebody else's page, so the things that go wrong are mostly about the host rather than the chart.

Check that iframes survive. WordPress custom HTML blocks, Ghost, Webflow, Confluence's HTML macro, Notion embed blocks and every static site generator all keep them. Medium and some hosted builders strip them silently, and you will only notice when the published page is blank where the chart should be. Paste a gallery snippet first to find out in ten seconds.
Keep the lazy attribute. Every snippet carries loading="lazy". A frame below the fold then costs nothing until the reader gets near it, which matters because each frame loads its own copy of the renderer.
Keep the title attribute. It is what a screen reader announces when it reaches the frame. An untitled iframe is read out as "frame", which tells the listener nothing.
Two or three per page, not nine. This page is deliberately over the sensible limit so you can compare them side by side. In a real article, a chart the reader has to scroll past is a chart they will not read.
Height is fixed, width can flex. Set the width to 100 percent, as these do, and the chart reflows with the column. There is no automatic height, and the workaround for one would be a script talking across the frame, which is exactly what an embed with no back end should not have.
The link is the data. Anyone who can read your page can read the rows out of the URL. That is a feature for public numbers and a hazard for anything else.

Frequently Asked Questions

Are these real embeds or screenshots?

Real. Every frame on this page is an iframe pointing at the embed renderer with a payload in its hash, and the snippet under it is the same link with the public host in it. The links are generated in your browser when the page loads, from the same encoder the builder uses, so a page of stale examples is not possible: if the format changed, these would change with it.

Can I paste one of these snippets straight into my site?

Yes, and it will render the sample data exactly as you see it here. That is useful for checking that your platform accepts iframes at all before you spend time shaping your own chart. When you are ready with your own numbers, the builder takes a CSV and gives you the same kind of snippet.

Why is one of them dark on a light page?

Because its theme is pinned rather than following the reader. The area chart of sessions per day is set to always dark, which is what you want when your page has no dark mode of its own and you would rather the chart look deliberate than merely inherit. The other frames follow the reader's own preference, so they flip with your operating system setting.

Why do some use one color and others use several?

Because color should carry meaning or stay out of the way. A bar chart of revenue by product is one measure split one way, so it gets one hue; giving each bar its own color implies a distinction that does not exist. The donut gets the full categorical palette, because there the color is the only thing telling the slices apart in the legend.

How large are these links?

The chart embeds here run between roughly one and four kilobytes, because a chart embed carries only the columns the chart reads and that text compresses well. The table embed is the largest, since a table needs every column, and it is capped at forty rows on purpose. The builder shows the exact size for whatever you make and refuses anything past 200 KB.

Does an embed slow my page down?

Each frame loads its own copy of the chart renderer, so the first one costs a few hundred kilobytes of JavaScript that the browser then caches for the rest. Every snippet carries loading equals lazy, so a frame below the fold is not fetched until the reader scrolls near it. Nine on one page, as here, is more than any real article should have.

Can readers interact with an embed?

They can hover for a tooltip with the exact value, and that is deliberately all. There is no filtering, no drill-down and no link back into a tool with their data in it. An embed is a finished statement inside somebody else's page, and a frame that changes state under a reader is usually a nuisance rather than a feature.

What happens on a phone?

Every snippet here uses a width of 100 percent, so the frame tracks its container and the chart inside redraws to fit. Height stays fixed, because an iframe cannot resize itself to its content without a script talking across the frame boundary. On a narrow screen a bar chart with many categories will be tight; fewer bars or a taller frame both fix it.