What is the chart widget?
The chart widget renders your data as a bar, line, or pie chart that animates into view on scroll. It's lightweight SVG/CSS — no charting library — so it loads fast and matches your brand colors.
When to use a chart
- Bar — compare categories (revenue by quarter, votes per option).
- Line — show a trend over time (growth, traffic).
- Pie — show parts of a whole (market share, budget split).
How it works
An IntersectionObserver triggers the fill animation when the chart scrolls into view: bars rise to their value, the line draws along its path, or the pie sweeps from zero. Values and labels are real text, so the chart stays accessible and crawlable.
Best practices
- Pick the chart type that matches the comparison you want to make.
- Round numbers and keep labels short.
- Use one accent color for emphasis; reserve multiple colors for pie slices.
How to make a chart — free
Enter your data above
Add label/value rows and choose bar, line or pie.Embed or download
Copy the embed code or save the HTML file.Tell the data story
Combine charts with text and visuals in Scrollytelling — free to start.
Templates that use a chart
Want a head start? These ready-made, fully-editable templates put the chart to work — customize one and publish in minutes.
Chart — frequently asked questions
Is the chart widget free?
Yes — edit your data and export the chart at no cost, no account.
Which chart types are supported?
Bar, line, and pie — switch between them in the editor.
Does it animate on scroll?
Yes — the chart fills in when it scrolls into view (bars grow, line draws, pie sweeps).
How do I embed the chart?
Copy the embed code into any site or CMS, or download a standalone HTML file.