Build the chart in PlotSet
Upload a CSV or Excel file, paste from a spreadsheet, or connect a Google Sheet. Pick a template, bind the columns, and set your colours, fonts and number formatting to match the site.
Charts for Webflow
Put an interactive chart on a Webflow page without leaving the Designer. Build it from your spreadsheet, copy one line of HTML, and drop it into an Embed element — it renders for every visitor, at every breakpoint.
Um gráfico criado com dados do Webflow
Não é uma captura de tela — é um gráfico interativo real, incorporado exatamente como o seu seria.
Exemplo: Top landing pages by sessions
O código de incorporação
Uma linha de HTML. Este é o código real do gráfico acima — cole em qualquer página que aceite HTML.
<iframe width="100%" height="100%" src="https://plotset.com/api/embed/057b2622-2412-4620-98d9-1921b7874fc7" />O tamanho é seu: defina largura e altura no iframe, ou coloque-o em um contêiner com a proporção que preferir.
PlotSet e Webflow, com honestidade
Webflow is a visual builder that outputs real HTML, and that is the whole reason this works with nothing installed. A PlotSet chart is published as a URL with a one-line iframe snippet, and Webflow's Embed element takes raw HTML and puts it in the page exactly as written. So the chart lands in your layout like any other element: it sits in a section, it respects your grid, it can be styled and spaced with the same controls as everything around it. What it does not do is inherit your typography or your colour variables — it renders inside its own frame, drawn by PlotSet, which is what keeps it identical for every visitor regardless of the theme, the browser or the device. The one Webflow-specific thing worth knowing before you start is that custom code publishes only on paid Site plans, so check yours before you build the page around a chart.
Como fazer um gráfico com dados do Webflow
Da planilha ao gráfico publicado, passo a passo.
Publish it and copy the snippet
Publishing gives the chart a public URL and a one-line iframe snippet. That snippet is everything Webflow needs — there is no script tag and no library to load.
Add an Embed element where you want the chart
In the Designer, open the Add panel, search for Embed, and drag it into your section — or press A and type "embed". Paste the snippet into the code editor and save.
Switch to Preview to see it
The canvas shows a placeholder rather than a running chart, because the Designer does not execute embedded frames. Preview mode renders it, and so does the published site.
Give the wrapper a height, per breakpoint
The snippet is 100% wide, so it fills whatever container it sits in — but an iframe has no intrinsic height. Put the Embed in a div, set a height there, and adjust it on tablet and mobile the way you would any other element.
For a chart per CMS item, embed inside a Collection List
Drop an Embed element inside a Collection Item, then use Add Field in the code editor to splice a CMS field into the iframe URL. One template page, one chart per item, no duplicated markup.
O que você ganha além dos gráficos do Webflow
Nothing to install, nothing to maintain
No app, no third-party script, no library added to your pages. The chart is a URL, so there is nothing that can break on a Webflow release or slow down your Lighthouse score across the whole site.
It cannot be reflowed by your styles
The chart renders inside its own frame with its own CSS, so a class change, a global font swap or a new breakpoint cannot rearrange it. What you designed is what visitors see.
Chart types no visual builder gives you
Choropleth and symbol maps, sankey diagrams, treemaps, bump charts, marimekko and animated bar chart races — around 300 templates, all embeddable the same way.
Update the data, not the page
Because the page holds a URL rather than an exported image, re-uploading your data updates the chart everywhere it appears. No re-exporting PNGs, no re-publishing the site to fix a number.
One chart per CMS item
Store a chart URL on a Collection and bind it into an Embed inside the Collection List. A hundred case-study pages can each carry their own chart from a single template page.
The same snippet works everywhere else
It is ordinary HTML, so a chart built for Webflow drops into WordPress, Ghost, Notion or a plain static page without changes.
O que isto não faz
Custom code needs a paid Site plan
Webflow publishes Embed element code only on paid Site plans. On a free webflow.io site the element is there in the Designer but the code does not go live, so a chart on a staging site is not proof that it will work on the real one.
The Designer canvas will not render it
You will see a placeholder box until you switch to Preview or publish. That trips people up often enough to be worth saying twice: the chart is not broken, the canvas simply does not run frames.
You have to set the height yourself
An iframe has no natural height, so an Embed with no height styling collapses or crops. Set it on the wrapper, and check it again on the tablet and mobile breakpoints.
It is a frame, so it is not indexed as page text
Search engines read your page, not the chart inside it. Any number you want found should also appear in the surrounding copy — which is better writing anyway.
There is no live sync from a spreadsheet
Charts hold their own copy of the data. Updating a published chart means re-pasting or re-uploading the rows; the embed then updates everywhere on its own.
The Embed element has a code-size cap
Webflow limits how much code one Embed can hold. A one-line iframe is nowhere near it, but a chart pasted as inline SVG or as a wall of markup can hit the ceiling — another reason to embed the URL rather than the drawing.
Perguntas sobre gráficos do Webflow
Build and publish the chart in PlotSet, copy the one-line iframe snippet, then drag an Embed element onto your page in the Designer and paste the snippet in. Switch to Preview to see it render.
Publique seus dados do Webflow como um gráfico interativo
Traga suas linhas e tenha um gráfico interativo incorporável em poucos minutos — grátis, sem cartão de crédito.