Pie and Doughnut are the same chart, with one setting between them — and Doughnut has a data entry trap worth knowing before you build one.
Both show a share of a whole. Pie is a single field of values; Doughnut is a repeater that looks similar but behaves differently, and getting it wrong produces something that looks broken.
For every Dynamic Device setting in one place, see the Advanced Charts block guide.
Before You Start
- Edition: Pro — the Advanced Charts block needs Nexter Blocks Pro.
- Block to enable: Advanced Chart, switched on under Nexter > Blocks in your WordPress dashboard.
- Every value is typed, separated by a pipe (
|). Labels, one row of series data, colours — all of it is a single line of text with|between the parts, not a spreadsheet-style grid.
Pie: the simple case
- Set Style to Pie, then set Orientation to Pie.
- Type your slice names into Label Values.
- Open Datasets and type one value per slice into Data, pipe-separated.
Pie always renders proportional slices from this one field — there is no trap here, measured.
Doughnut: read this before you add rows
Doughnut Data is not one row per slice. Measured: adding one row per slice draws a separate full ring for each row, not proportional slices, and the legend strikes through every entry after the first. Put every slice’s value in one row, pipe-separated — add a second row only if you deliberately want a second, concentric ring.
- Set Style to Pie, then set Orientation to Doughnut.
- Type your slice names into Label Values.
- Open Datasets and add one row. Type every slice’s value into its Data field, pipe-separated — matching the order of Label Values.
Do not add a second row unless you want a second ring. Measured: a second Datasets row draws a second, separate concentric circle rather than more slices — a genuine feature for comparing two data sets at a glance, not a mistake, but not what most people reach for first.
How It Behaves
- Doughnut’s per-row data field takes ALL the slice values, not one. A row’s
Datafield is itself pipe-separated —64|19|17— matching the count and order of Label Values. - One row per slice was the mistake, measured directly. Building it that way rendered three separate full rings, each 100% of its own circle, with the legend showing every entry after the first struck through.
- Multiple rows are for multiple concentric rings on purpose — a legitimate way to compare two series in one chart, not the way to add more slices.
- The Doughnut hole size is fixed by the plugin (measured at 50% cutout) and is not adjustable from the editor.
Limitations
- Doughnut’s data entry is not obvious from the UI — this guide exists because of that.
- The doughnut’s cutout size is not configurable.
- Data is typed, not linked to a spreadsheet or external source.
Troubleshooting
My doughnut is solid rings instead of slices
You likely have one Datasets row per slice. Delete the extra rows and put every value in a single row’s Data field, pipe-separated, matching Label Values.
My legend shows some names crossed out
Same cause as above — multiple single-value rows confuse Chart.js’s default legend. Combine them into one row.
I want two rings on purpose
Add a second Datasets row with its own pipe-separated values — that is the correct way to get a second, inner ring.
