Grist tutorial: every dashboard block, explained
Advanced Charts gives a Grist table 22 kinds of building block, from KPI cards to invoices to a drag‑to‑reschedule calendar. This Grist tutorial walks through every one of them: what each block does, every setting it has, and when you’d reach for it — written for someone who has never built a dashboard before.
Treat this Grist tutorial as a shelf reference rather than a straight read: the contents jump to any block, and each entry stands on its own. If you’d rather start from a finished design and work backwards, the ten starter templates are the faster door in.
The basics every block shares
Before the individual blocks, five things work the same way everywhere. Learn these once and most of this Grist tutorial becomes obvious:
- Blocks are added from one panel. In edit mode, click the Add Element tile at the end of any page. Blocks are grouped into Data & Metrics, Content, Basic Elements and Advanced; a search box filters them, ★ marks the usual starting points, and the (i) on each tile explains it in a sentence.
- Every editor has a live preview. The block renders at the bottom of its settings panel and updates as you change things. Nothing lands on the page until you press Apply, and nothing is stored in your document until you press Save & Publish.
- Data blocks start with a table. Anything that reads your data has a Data table dropdown listing every table in your document. Pick the table first; the column dropdowns fill themselves from it. On a live document these editors also carry an “Edit the data in …” button for fixing a value without leaving the page.
- Every block has a width. The Block width row (XS · S · M · L · Full) decides how much of the row it takes. Four XS stat cards share a row; a Full chart takes its own. Phones ignore all of this and stack everything one column wide.
- Blocks are edited in place. Hover any block for drag, edit and delete buttons — or click the block itself to open its editor.
Data & Metrics blocks
The eight blocks that read your tables. This part of the Grist tutorial is where most dashboards live.
1. Stat card — one number that matters
A big number computed from a column: total revenue, headcount, samples logged. Usually the first row of any dashboard, three or four of them side by side at XS width.
Pick a text column and the card switches to counting for you — “how many rows” is a perfectly good number. The trend is the small “+30.9% vs prev. period” line: it splits your rows by the trend column and compares the latest period against the one before.
2. Chart — eleven chart types in one block
Column, bar, line, area, pie, doughnut, treemap, funnel, radar, scatter and gauge, all inside one block. You choose data first and a chart type second — and types that don’t fit your selection grey out, so a nonsense chart is hard to build.
%count, %groups, %total) ·
Block width.If you’re unsure what any of that means, don’t configure a chart at all — the wizard exists so this part of the Grist tutorial can be skipped. Open Add Element → Not sure? Let me help. It asks which table, what to compare, and what number to show, then recommends the chart and adds it. Funnels have one extra trick — they can be built stage by stage from separate columns, which keeps them honest when your data isn’t already cumulative.
3. Breakdown — “how many of each?”
Counts each distinct value in a column and shows the split with coloured dots, counts and percentages. Empty cells get their own row, which quietly makes it a data-quality check too.
%total, %groups, %top, %topcount,
%empty) · Block width.4. Map — rows with coordinates, pinned
Every row with a latitude and longitude becomes a pin on an interactive Leaflet map, with clustering when pins crowd together and Street / Satellite / Terrain layers built in.
sample_latitude, or picked) · Popup title · Color points by (optional category
with a legend) · up to 4 tooltip fields · an optional extra tile layer (Tile URL, layer name, max zoom,
attribution) for teams with their own map server · Subtitle placeholders (%count,
%missing, %total) · Block width.5. Progress bar — a number against a goal
“$1.17M of $3M — 39%.” One fill bar, endlessly useful for fundraising totals, sales targets and SLAs.
6. Data table — the actual rows
Sometimes people don’t want a summary, they want the list. This block shows a table’s rows with live search, click-to-sort headings and paging.
G1:G48 that tint cells, e.g. a profit
column or a promotion zone · Block width.It also prints properly: the print button renders every row as a clean report with your site’s branding, not a screenshot with a pager in it.
7. Invoice — a row becomes a document
Pick a row from an invoices table and it renders as a finished, printable document: your logo and details, the client’s address, line items, totals. It has the most settings of any block in this Grist tutorial because it replaces a whole app, but the editor guesses most of them from your column names the moment you pick the table.
The document — Block title · Word on the document (type “Invoice”, “Receipt” or “Quote” — it’s free text) · Style (four mastheads: Classic, Banded, Letterhead, Minimal).
Where the invoices are — Invoice table · Invoice number · Client · Issue date · Due date · Amount · Status · Note · Their reference / PO and its label.
Line items — either a single Amount with a one-line description, or a separate line-items table (linked back by an invoice column) with Description, Quantity, Unit price and an optional Line total.
Client address book — a clients table, its Name column and Address lines.
Your details — Business name, Address, Email, Phone, Tax ID and its label, Logo.
Money & text — Currency symbol · Accent colour · Tax label and rate · Payment terms · Payment details · Prepared by · Closing message · Total label · Block width.
The block’s print button prints only the invoice — the rest of the page is left out — and “Save as PDF” in the print dialog turns it into a file you can send.
8. Calendar — anything with a date
Rows plotted on a month view. On a live document it’s two-way: drag an event to a new day and the date is written back to your table as one undoable change, and edits made in Grist appear on the calendar by themselves.
Dates respect the column’s own timezone, so nothing drifts a day when a dashboard is opened from another continent. Busy days collapse into a “+N more” link rather than stretching the whole month.
Content blocks
Seven blocks that carry words and pictures rather than metrics — the difference between a wall of charts and a page someone actually reads. This stretch of the Grist tutorial goes faster: these are simpler tools.
9. Text — headings and paragraphs
A heading plus formatted text, for introductions, explanations and context between charts.
10. Image — uploaded, or straight from your data
A photo with an optional caption. The interesting mode is the second one: point it at a Grist Attachments column and a specific row, and the image comes out of your document — a product photo, a headshot, a site plan.
11. Counter — a number that counts up
The classic “1,250+ happy customers” effect: a number animates from start to end when it scrolls into view. The values are typed in, not calculated — for computed numbers use a stat card.
Visitors whose systems ask for reduced motion see the finished number, no animation.
12. Testimonials — quotes with stars
A grid of quote cards: name, quote, star rating, optional photo. Type them in, or — the better trick — read them from a feedback table so new reviews appear on their own.
13. Accordion — questions that expand
A list of questions that open to reveal answers. Made for FAQ sections, works for anything long that shouldn’t fill the page by default.
14. Timeline — dated milestones
A vertical line of events, each with a date, a title and a short description. A history, a roadmap, a process — anything with an order.
15. Pricing table — plans side by side
Plan cards with a price, a feature list and a button each. One plan can be highlighted as the recommended pick.
Basic elements
The quickest section of the Grist tutorial: six small blocks that do layout and utility jobs. None of them read data; all of them earn their place.
16. Button — a call to action
17. Icon — one symbol in a badge
A standalone icon in a coloured badge, from the same 509-icon library the stat card uses. Decorative on its own, or clickable with a link.
18–19. Spacer & Divider — breathing room
The spacer is invisible vertical space; the divider is a thin rule. Between them they turn one long scroll into visible sections.
20. Countdown timer — a deadline that ticks
Days, hours, minutes and seconds to a date you set, ticking live in the visitor’s browser. Grant deadlines, launches, registration cut-offs.
21. QR code — scan to open
A scannable code for any link or text, generated entirely in the browser — nothing is sent anywhere to make it. Put one on a printed report so paper leads back to the live page.
Advanced
22. HTML/CSS/JS — the escape hatch
The last stop in this Grist tutorial is the escape hatch. For the one thing no block covers: write your own HTML, CSS and JavaScript. It runs in a sandboxed frame that cannot read your Grist data or the widget’s settings, so a pasted snippet can’t become a data leak.
Grist tutorial FAQ
Do I need to know statistics or code?
No. The wizard picks chart types from plain-English questions, impossible combinations grey themselves out, and the only block involving code is optional and labelled Advanced. This Grist tutorial deliberately assumes zero prior knowledge.
Which blocks read my Grist data?
All eight Data & Metrics blocks, always. Three Content blocks can optionally: the image block (from an Attachments column), testimonials (from a reviews table) and the progress bar (calculated from a column). Everything else — counters, timelines, pricing, buttons — is typed in.
Can I change a block after adding it?
Yes. Hover it in edit mode and click the pencil (or click the block). Apply updates the page, Save & Publish writes it to the document. Delete is the bin icon next to the pencil.
How do block widths work?
Every block has XS–Full widths. Blocks flow into rows left to right: four XS cards share a row, a Full chart takes its own. On phones everything stacks one column wide, whatever you chose.
Where does the sample data in the screenshots come from?
The widget’s built-in demo — a real Grist-style table read live, not mockups. You can poke at everything in this Grist tutorial yourself in the live demo, no account needed.
Keep going
That is the whole Grist tutorial — all 22 blocks. Two places to go next:
