Flexa Block Pro

The Chart Block: Real Numbers On The Page, Without A Screenshot

Draw your figures as a bar, line, area, pie, donut, radar or gauge chart in the editor — and update them by editing a number, not re-exporting a screenshot.

Part of Flexa Block Pro

The numbers page nobody wants to own

You build a client’s results page and the figures arrive as a spreadsheet screenshot. Next quarter a new set lands, and someone reopens the sheet, re-exports, re-crops and re-uploads at exactly the old size, or the section reflows too. Across a whole site the numbers go stale, because keeping them current is a job nobody was scoped for.

The Chart Block draws those figures as a real chart, from data that lives in the editor. When a number changes, you change the number — nothing to re-export, and the client can do it without calling you.

Two series stacked, with the goal drawn across. Quarterly figures for two regions, and a target line so the gap needs no arithmetic.

Quarterly sales by region
Two teams, stacked against a shared target
NorthSouth
Q11815
Q22419
Q32226
Q43129

What you actually get to set

Eight shapes from one block — bar, horizontal bar, line, area, pie, donut, radar and gauge. Pick one after you have the data.
Type the figures into a grid, upload a CSV, or paste a Google Sheets link. The imported set stays apart from what you typed.
Give each series its own bar-or-line shape and its own left or right axis, so a total and a percentage share one frame.
Draw a target line at any value, with a label on it, so a reader can see whether the bars clear the goal.
Format numbers the way your readers write them — grouped digits, a unit before or after, shortened when large — and let a bar chart turn sideways on a phone.
Plus the usual spacing, colour and responsive controls, so it fits your design instead of fighting it.

Finished, not just featureful

A chart is a picture, and a picture tells a screen reader nothing. So the block ships more than the drawing.

Every chart also renders its figures as a plain data table, so screen readers get the real numbers and the page still works if the drawing never runs.
The draw-in animation holds still for visitors whose system asks for reduced motion.
Every colour — series, labels, legend, target line — has a light and a dark counterpart.
Chart height and text sizes take their own value per screen size, and the styling is worked out at save time.

Same block, different shape

An area chart with a curve and a unit suffix. One series over six months, reading as percentages wherever a number appears.

Conversion rate
Six months, one series
Conversion
Jan2.1
Feb2.6
Mar2.4
Apr3.2
May3.8
Jun4.1

A donut with the values printed on it. The same data grid, drawn as parts of a whole with the legend at the side.

Where visitors came from
One series, drawn as slices
Share
Direct48
Search34
Referral18

Setting one up takes about a minute. Drop the block in, open the data grid, type your rows and columns, pick a shape, and the preview redraws as you go. No CSS, no export step.

It sits in the same editor as the blocks you already use, and shares the same spacing, colour and responsive controls — it just needs Flexa Block switched on alongside it.

Put the real figures on the page

Charts you keep inside the editor, on a page your client can update without opening a spreadsheet.

See Flexa Block Pro
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found