Scrollchart WordPress Plugin for Animated Charts and Infographics
- What this is
- A free WordPress plugin for embedding animated, interactive infographics and charts from the Scrollchart catalogue, and for generating new ones with AI without leaving WordPress.
- Where it works
- Gutenberg block, [scrollchart] shortcode for Classic Editor, WPBakery Page Builder element, Elementor widget. Same controls everywhere.
- How to embed
- Install the plugin. Add a Scrollchart Diagram block (or element/widget). Pick from the catalogue, paste a slug, or hit Generate with AI. Done.
- File size
- Plugin: ~45 KB. Each diagram: ~25 KB, lazy-loaded from CDN.
- Licence
- Plugin: GPLv2+. Diagrams: free forever under the Scrollchart terms.
- Current version
- 2.0.2 (2026-06-20). Works with WordPress 6.3 and up, PHP 7.4 and up.
In your WordPress admin: Plugins › Add New, search Scrollchart, click Install Now. Manual .zip download available below.
Four ways to embed
Gutenberg block
Click + in the editor, search "Scrollchart", browse the catalogue with thumbnails and search, or generate a new diagram with AI. Live preview in the block.
WPBakery element
Add the Scrollchart Diagram element from the WPBakery library. Same catalogue picker, AI generator, live preview, and styling controls as Gutenberg.
Elementor widget
Drag the Scrollchart Diagram widget into your layout. The Elementor editor previews the diagram live as you tweak theme, accent, border, or size.
Shortcode
Drop one line into any Classic Editor post, text widget, or builder text block:
[scrollchart slug="bell-curve" theme="auto"]Universal HTML
Plugin not installed? Paste the two-line HTML snippet into any Custom HTML block. Works on any WordPress theme.
<div data-scrollchart="bell-curve"></div>
<script src="https://scrollchart.com/embed.js" async></script>AI generator (built in)
Every editor surface has a Generate with AI button. Describe what you want to show (your data, a fact, or a study URL) and a fresh diagram is created and inserted into your post.
How to add a chart to WordPress
Adding charts in WordPress usually means wrestling with a settings panel, a CSV upload, or a chunk of JavaScript that drags down your page speed. Scrollchart keeps the whole job inside the editor. Here is the full path from a blank post to a published, animated chart.
- Install and activate the plugin. In WordPress admin, go to Plugins › Add New, search for Scrollchart, then click Install Now and Activate. The block, shortcode, WPBakery element, and Elementor widget all register at once.
- Open the post or page where you want the chart and place your cursor where it should appear.
- Insert the Scrollchart Diagram. Add the Gutenberg block (click + and search Scrollchart), the WPBakery element, or the Elementor widget. On the Classic Editor, type a
[scrollchart]shortcode instead. - Choose your chart. Browse the catalogue by category with thumbnail tiles, paste a known slug, or click Generate with AI and describe the chart you want from your own data, a fact, or a study URL.
- Style it to match your theme. Set the accent colour from the swatches or a custom hex, pick a light, dark, or auto theme, and choose a size preset. The live preview updates as you go.
- Publish. The chart loads as an inline SVG, lazily fetched from the Scrollchart CDN when it scrolls into view, so it never blocks your first paint.
That is the complete process to add a chart in WordPress: no external chart builder, no manual embed codes, and nothing to maintain when the underlying data is refreshed centrally.
Chart and diagram types you can embed
The catalogue spans hundreds of diagrams across 17 categories, from fitness and nutrition to finance, marketing, statistics, and computing. Whatever the topic, these are the WordPress charts and graphs you can drop into a post, each rendered as a responsive, keyboard-accessible animated SVG.
Pie and donut
Show how a whole splits into parts: a budget, a macro breakdown, a market share. A WordPress pie chart reads at a glance and animates each slice into place.
Bar and column
Compare values across categories or track them over time. The bar chart is the workhorse for ranking, before-and-after, and grouped comparisons.
Line and area
Plot a trend across a continuous axis: weight over weeks, revenue over quarters, traffic over months. Area variants emphasise the cumulative total.
Scatter and bubble
Reveal correlation and clusters across two or three dimensions, ideal for study data and relationships between variables.
Radar chart
Profile a single thing across many attributes at once: a supplement, a diet, a strategy. A WordPress radar chart makes strengths and gaps obvious.
Org chart
Map a hierarchy: a team structure, a taxonomy, a decision chain. The org chart keeps relationships clear as the tree grows.
Flowchart
Walk a reader through a process or a branching decision. A flowchart turns a wall of if-then text into a path they can follow.
Gantt and timeline
Lay out a schedule or a sequence of events. A gantt chart in WordPress shows overlapping phases; a timeline traces milestones in order.
Sankey diagram
Trace where a quantity flows and where it is lost, such as calories in versus out, or budget across departments.
Venn diagram
Show overlap between two or three sets: shared symptoms, common features, the sweet spot in the middle.
Distribution and bell curve
Place a value in context against a population, the classic device for percentiles, ranges, and what counts as normal.
Funnel
Track drop-off through stages: a marketing funnel, a sign-up flow, a conversion path from awareness to action.
Every type honours the same accent colour, theme, language, and size controls, so a set of charts in one WordPress post stays visually consistent. If the exact chart you need is not in the catalogue, the AI generator builds it from your prompt in seconds.
Choosing a WordPress chart plugin
Most WordPress chart and graph plugins fall into two camps. One camp renders charts on a canvas with a heavy JavaScript library and a chart-builder dashboard: powerful, but it adds page weight and often gates the better chart types behind a paid tier. The other camp simply inserts static images, which load fast but cannot adapt to a dark theme, look soft on retina screens, and go stale the moment the data changes.
Scrollchart sits deliberately between the two. Each chart is an animated inline SVG of around 25 KB, lazy-loaded from the CDN below the fold, so a page with several charts stays light and Core Web Vitals stay clean. The plugin itself is free, GPLv2, and on the official WordPress.org directory, with no premium upsell hiding the chart types you actually want. When you are comparing the best free WordPress chart plugin against paid options, weigh three things: page weight per chart, whether charts respond to theme and screen size, and whether you can update the underlying data without re-exporting an image. Scrollchart is built to win on all three.
Install in 60 seconds
- In WordPress admin: Plugins › Add New.
- Search for Scrollchart.
- Click Install Now, then Activate.
- Open any post or page. Add a Scrollchart Diagram block (or WPBakery element / Elementor widget). Pick from the catalogue or hit Generate with AI.
Manual install (advanced)
If you cannot reach the WordPress.org directory from your site (firewalled host, air-gapped staging, etc.), install from a local zip:
- Download the plugin
.zip(v2.0.2). - In WordPress admin: Plugins › Add New › Upload Plugin.
- Choose the zip file, click Install Now, then Activate.
The zip on this page is identical to the version on the WordPress.org directory and is built from the same source tree.
Why animated charts belong in WordPress content
WordPress powers over 40% of the web and most of that content uses static images to illustrate data. A PNG chart is fast to insert but has no interactivity, no hover states, text that is unreadable on mobile, and no ability to update without a full redesign. An animated SVG chart from the Scrollchart catalogue is smaller than a typical PNG, renders crisply at any size, responds to light and dark themes, and can be updated centrally without touching the WordPress post.
The WordPress chart plugin market has several established players. Most require a subscription or lock chart types behind a paid tier. Scrollchart takes a different approach: the catalogue is free, the plugin is GPLv2, and the diagrams are served from the Scrollchart CDN so your WordPress server stays fast.
What is in 2.0.2
- Built-in AI generator. Describe what you want to show; the plugin creates a custom diagram and drops it into your post. Works with your own data, world-knowledge prompts, or a study URL as the source.
- Visual catalogue browser. Search and filter the full Scrollchart catalogue with thumbnail tiles, right inside the editor. Click any tile to preview at full size before picking.
- Live preview. The diagram updates inside the editor as you change theme, accent, background, border, or size.
- Swatch colour pickers. Pick from six brand colours or set a custom hex for accent, background, text, and border.
- Theme toggle. Auto (follow visitor preference), Light, or Dark.
- Size presets. Fit container, Medium, or Small, no pixel typing.
- 15-language support. Per-embed language picker in every surface (block, shortcode, WPBakery, Elementor): English, Spanish, French, German, Portuguese, Italian, Russian, Japanese, Simplified Chinese, Arabic, Hebrew, Korean, Polish, Turkish, Dutch. Diagram labels, axis titles, and source attribution render in the chosen language. RTL support for Hebrew and Arabic.
- Full builder parity. Gutenberg, WPBakery, and Elementor all expose the same controls through one shared editor bundle.
- WordPress.org translation pack. Ships a
scrollchart.pottemplate and loadsload_plugin_textdomainon init, so community translations served through translate.wordpress.org load automatically.
New in 2.0.2
- Design your own diagram, right in the editor. Pick a chart type, enter your own data and branding, and style the colours, animation and language — with a live preview. Or describe what you want and let AI build it. Your designs are saved to your site and stay re-editable.
- Settings page. Site-wide defaults for theme, accent colour, default language and border, plus an Advanced section.
- Structured data for search. Each embedded diagram outputs schema.org markup describing it, so search engines can understand and surface your diagrams.
- 15 languages. Diagram labels render in the language you choose; every catalogue diagram is available in all of them.
- Your saved diagrams. A library of the diagrams your site has designed — insert, edit, or remove them anytime.
Free forever
The diagram and explainer text are served from scrollchart.com so the content can be updated over time to reflect new research or to link to relevant sources within the explainer. No subscription, no ads, no tracking pixels served to your readers.
Frequently asked
Is there a free WordPress chart plugin for animated diagrams?
The Scrollchart WordPress plugin is free and listed on the official WordPress.org plugin directory. It adds a Gutenberg block, a [scrollchart] shortcode, a WPBakery element, and an Elementor widget for embedding animated charts and infographics from the Scrollchart catalogue. No premium tier, no subscription, no account required.
How do I install the plugin?
Open your WordPress admin, go to Plugins > Add New, search for "Scrollchart", click Install Now, then Activate. The block, shortcode, WPBakery element, and Elementor widget all appear immediately. A direct .zip download is also available on this page as a manual fallback.
Does the plugin work with Elementor and WPBakery?
Yes, natively. The plugin registers a Scrollchart Diagram widget in Elementor and a Scrollchart Diagram element in WPBakery Page Builder. Both have the same controls as the Gutenberg block: catalogue picker with thumbnails and search, AI generator, live preview, swatch colour pickers, theme toggle, and size presets. Classic Editor users can use the [scrollchart] shortcode.
Can I generate custom diagrams without leaving WordPress?
Yes. Every editor surface (Gutenberg, WPBakery, Elementor) has a Generate with AI button. Describe what you want to show (your own data, a fact you want visualised, or a study URL) and the plugin generates a diagram for that prompt and drops it into the post. Sources and confidence are shown for transparency.
Does the plugin slow down my site?
No. The plugin file is small and the diagram bundles load lazily from the Scrollchart CDN as each one scrolls into view. First paint is unaffected and Core Web Vitals stay clean.
Can I use the plugin on a WordPress Multisite network?
Yes. Install at the network level or per site. Each site keeps its own settings.
What happens to my embedded diagrams if I deactivate the plugin?
Existing shortcodes and blocks fall back to a plain link to the diagram page on scrollchart.com. Reactivating the plugin restores the live animated diagrams instantly with no changes to your post content.
Does the plugin connect to external services?
Yes, and every connection is documented in the plugin readme and at scrollchart.com/privacy. The plugin fetches diagram metadata from scrollchart.com/api/diagram, loads the interactive diagram view in an iframe from scrollchart.com/embed-frame/, sends a view ping (diagram slug + the URL of the page the diagram is embedded on, used for usage stats and to confirm the embed is still live), loads the catalogue list from scrollchart.com/api/catalog.json inside the editor, and only when a logged-in editor clicks the Generate with AI button, sends the typed prompt (and an email address if the editor chooses to enter one) to scrollchart.com/api/generate.php. No cookies and no visitor-identifying data.
Does the WordPress plugin work for non-English sites?
Yes. The plugin renders the catalogue diagrams or AI-generated diagrams in every major language: English, French, Spanish, German, Italian, Portuguese, Mandarin, Hindi, Arabic, Japanese, Korean, Russian, Turkish, Polish, Dutch, and many more. Labels, axis titles, and source attribution all render in the language of the prompt, so the embed is publication-ready for any locale.
What is the easiest way to add charts in WordPress?
Install the Scrollchart plugin, add a Scrollchart Diagram block (or WPBakery element, Elementor widget, or [scrollchart] shortcode), then either pick a chart from the catalogue or click Generate with AI. There is no separate dashboard, no CSV upload step, and no shortcode syntax to memorise. The whole flow happens inside the post editor, and the chart appears live in the preview before you publish.
Can I use the plugin for data visualisation, not just decorative charts?
Yes. The AI generator accepts your own numbers, a table you paste in, or a study URL, and turns them into a labelled chart with axis titles and source attribution. The catalogue also covers data-heavy types such as bar, line, area, scatter, radar, and distribution charts, so the plugin works for genuine data visualisation in WordPress, not only stock infographics.
Is Scrollchart a WordPress infographic plugin too?
Yes. Alongside standard charts and graphs, the catalogue includes infographic-style diagrams: flowcharts, org charts, timelines, sankey diagrams, venn diagrams, and funnels. Each one is an animated SVG that scales cleanly on mobile and adapts to your light or dark theme, so a WordPress infographic stays readable at any screen size.
Which specific chart types can I embed (pie, bar, org chart, gantt)?
Pie and donut, bar and column, line, area, scatter, radar, bubble, org charts, flowcharts, gantt and timeline charts, sankey flow diagrams, venn diagrams, distribution and bell curves, and funnel charts are all available. You can browse them by category in the editor catalogue, or describe the chart you need to the AI generator and it builds that type for you.
No WordPress site? You can still use Scrollchart.
Free AI chart generator
Paste your data, a finding, or a URL. The generator picks the right chart type and produces an animated, embeddable diagram in seconds.
Open the generator →100+ animated diagrams
Hand-built across 17 subjects: science, finance, fitness, law, engineering, and more. Filter by topic, copy one line of HTML, done.
Browse the catalogue →Now available in every major language: prompt in English, French, Spanish, German, Mandarin, Hindi, Arabic, Japanese, Portuguese, and more — the diagram labels render in the language you ask for.