Embedding charts
The embed snippet, responsive behavior, and how to pin a designed layout.
The embed snippet
Publishing a chart gives you an iframe snippet plus a small script. Paste both into your page. The script only needs to appear once, no matter how many charts the page carries.
How embeds respond to width
Kitegraph charts reflow. At any column width the chart lays itself out again: text stays full size, the title wraps, and labels reposition. Nothing is shrunk to fit.
Height follows the content. Charts with categories down the side, such as bar charts, ask for the height their rows need, and the script sizes the iframe to match. Time-series charts keep the plot height you designed, so a chart that reads 16:9 on desktop naturally becomes taller than wide on a phone. If the script is blocked or missing, the iframe falls back to the CSS aspect ratio in the snippet and the chart reflows inside that box instead.
Pinning the designed look
Sometimes you want the chart to stay exactly as designed, at any size: a dashboard tile, a tight sidebar, a slide. Add ?fit=scale to the embed URL and the chart renders at its authored size, scaled down to fit the iframe like a photograph. The composition never changes; only the overall size does.
With fit=scale the resizer script is unnecessary: the iframe keeps whatever box your CSS gives it. Use the default behavior for articles and reading surfaces, and fit=scale for layouts you control to the pixel.
Dark mode
Charts published with the "Match the reader's dark mode" option follow the reading page's color scheme automatically. Images and video always keep the mode the author designed.