Chart

A data-visualisation block with five chart types (Pie, Bar, Line, Radial, Bars), a built-in palette picker, and an editable rows-of- data list.

The block renders SVG charts that animate on scroll. The 3D toggle adds extrusion / depth treatment to applicable types.

When to use it

Inline data on a marketing or report page (revenue split, growth

curve, single KPI as a radial)

Visual comparison of small sets (≤8 categories)
A single progress / completion value as a radial ring

When not to use it

Live or interactive dashboards — the Chart block stores its data

in settings, not from a data source

More than 8 categories — the editor caps at 8 entries; use a

table or external chart for larger sets

Comparing series across time on multiple lines — the Line type

takes a single series (label + value pairs)

Chart Type — Pie · Bar · Line · Radial · Bars (5-button row, default: Pie)

Sets the chart family. The rest of the panel adapts to the choice (Style row, orientation, mode-specific sliders).

Style — varies by type

Pie — Flat · Exploded · Tilted · Half (default: Flat)
Bar — Plain · Rounded (default: Plain)
Line — Line · Area (default: Line)
Radial — no Style variants (the row is hidden)
Bars — no Style variants (the row is hidden)

Bar orientation (Bar only) — Vertical · Horizontal (default: Vertical)

Hidden for other chart types.

Data (max 8) / Value (Radial)

A drag-reorderable list of {label, value, colour} rows. Each row has:

Drag handle (hidden in Radial)
Label — text input
Value — numeric input (44px wide, right-aligned)
Colour swatch — opens the colour picker
× Remove

The default starter set is 4 categories with pastel colours.

+ Add Entry button below the list (hidden in Radial — only the first entry is used).

For Radial, only the first row's value is rendered as the progress; rows 2+ are hidden.

Palette — 6 presets (3×2 grid, hidden for Radial)

Click a preset to apply its colours to all rows in one go:

Pastel · Muted · Vibrant · Mono · Earth · Ocean

Each preset is shown as a 4-swatch strip in the button.

Pie-only sliders

Inner Radius — 0–80% (default: 0). 0 = full pie; 50–80 =

donut.

Tilt Sensitivity — 0–10 (default: 0). Mouse-tracked tilt;

appears only when Style is Tilted.

Radial-only sliders

Ring Diameter — 0–90% (default: 70). Hole size — 0 = solid

disc, 80 = thin ring with wide centre.

Ring Thickness — 4–40px (default: 18). Stroke weight on top

of the diameter.

Tilt Sensitivity — 0–10 (default: 0). Ring rotates left/right

with cursor X (max ±20° at 10).

Legend — Side · Bottom · Off (default: Side)

Hidden for Radial (single value) and Bars (label sits inline next to each bar).

Labels — None · % · Value (default: None)

Hidden for Radial (Radial centres its own value text).

Bottom toggles

Animate (default: on) — chart draws in on scroll-into-view.

Hidden when Pie + 3D combo is active (3D pie animation breaks reliably on this engine).

3D (default: off) — extrudes the chart shape. Hidden for

Bars (Bars renders flat HTML — no extrusion path).

Per-device overrides

Sliders (Inner Radius, Ring Diameter, Ring Thickness, Tilt Sensitivity) and toggles can have per-device values.

Common overrides:

3D — off on mobile (the extrusion is heavy on lower-powered

devices)

Tilt Sensitivity — 0 on mobile (no cursor)

Common patterns

Revenue split donut

Type Pie · Style Flat · Inner Radius 50 · Palette Muted · Legend Side · Labels % · 3D off.

Progress KPI ring

Type Radial · Ring Diameter 70 · Ring Thickness 18 · single entry e.g. {label: "Goal complete", value: 72}.

Growth-line area chart

Type Line · Style Area · Palette Ocean · Legend Bottom · Labels None · Animate on.

Horizontal bar comparison

Type Bar · Style Rounded · Orientation Horizontal · Palette Vibrant · Labels Value.

blocks/price-list — for tiered pricing rows (when the data is

prices, not data points)

blocks/plans — for full pricing-tier cards
blocks/text — when a number wants prose around it instead of

a chart