Smart Stats

4 steps 4 min Updated 24 September 2026

Overview

Smart Stats displays a row of doughnut charts for statistics you type in yourself — exam results, attendance, or any other figure worth highlighting. Each chart has a large figure and a label underneath it. There's no external data connection and no settings screen: you write the figures directly into shortcodes on the page. There's a wrapper shortcode, [smart_stats], and one [smart_stat] shortcode per figure.

Getting set up

Step 1: Open the page or post

Open the page or post where you want the stats, in the block editor.

Step 2: Add the wrapper shortcode

Add a Shortcode block with [smart_stats] … [/smart_stats], setting a title for the section.

Step 3: Add a stat for each figure

Inside the wrapper, add one [smart_stat] shortcode per figure, with its own id, title, value and pie_percentage.

Every stat needs an id that no other stat on the page uses — a short name with letters, numbers and hyphens and no spaces, such as attendance. A stat without one shows its figure and label but no chart.

[smart_stats title="Example Primary School" description="Our latest results"]
  [smart_stat id="attendance" title="Attendance" value="97%" pie_percentage="97"]
  [smart_stat id="expected-standard" title="Pupils achieving expected standard" value="82%" pie_percentage="82"]
[/smart_stats]

value is the text shown in large type; pie_percentage is how much of the ring is coloured in. They are separate, so a figure that isn't a percentage (for example value="12" for 12 clubs) still needs a pie_percentage.

Step 4: Publish and check the website

Publish the page and view it on the front end. The charts draw once the stats section is on screen and the visitor scrolls the page — see Troubleshooting.

Each stat takes up 300 pixels of width. If there are more stats than fit across the page, previous and next arrow buttons appear so visitors can move along the row.

Features

Where to find it: typed directly into a page or post's content — there is no settings screen.

Use one [smart_stats] section per page — the charts and arrow buttons only work for one section.

Wrapper shortcode

Parameter	What it does	Default
`title`	Section heading	Stats
`description`	Optional line under the heading	Empty
`cutout`	Size of the hole in the middle of each chart, in pixels. Set `0` for a solid pie chart	80
`background_colour`	Chart colour used by any stat that doesn't set its own `background_colour`	#3E4C59
`id`	A name for the section. Only change it if you have a reason to	stats_scroll_area

Individual stat shortcode

Parameter	What it does	Default
`id`	A unique name for this stat's chart. Needed for the chart to draw	Empty
`title`	Label under the figure	Empty
`value`	The figure shown as text (e.g. `97%`)	0
`pie_percentage`	How much of the ring is coloured in, 0–100. The rest is white	100
`background_colour`	This stat's own chart colour, overriding the wrapper's	Wrapper's `background_colour`
`type`	Has no effect — every chart is drawn as a doughnut. Use `cutout="0"` on the wrapper for pie charts	doughnut

There is no automatic data feed — update the value and pie_percentage figures by hand whenever the underlying statistics change.

Troubleshooting

The charts don't draw until the page is scrolled

Why it happens: the charts only draw when the visitor scrolls the page while the stats section is on screen. Until then, only the figures and labels show. If the whole page fits on screen and the visitor never scrolls, the charts stay blank.

How to fix it: this is a known limitation, not something you can configure around. Placing the stats further down the page, so visitors scroll to reach them, avoids it.

One chart is blank but its figure and label show

Why it happens: that [smart_stat] has no id, or shares its id with another stat on the page.

How to fix it: give every [smart_stat] its own id, for example id="attendance", id="reading", id="maths".

No stats appear at all

Why it happens: the [smart_stat] shortcodes are not nested inside [smart_stats]…[/smart_stats], or a closing tag is missing.

How to fix it: check every [smart_stat] sits inside [smart_stats]…[/smart_stats], with matching opening and closing tags.

Did this work for you?

If a step looked different on your site, tell us and we'll update the screenshots.