Advanced Charts for Grist by ANUPRESS — No-Code Dashboard Widget (2026)

By ANUPRESS Team · Last updated September 2026 · v3.7 · Reading time ~17 min · Beginner friendly

No installs, no accounts, and no server in the middle. Advanced Charts is a single URL you paste into Grist. Everything it builds lives inside your own document, and it stays that way.

What it is & why use it

Grist is a modern spreadsheet‑database. A custom widget is simply a web page you embed inside a Grist document. Advanced Charts is that web page. Instead of showing one chart, it gives you a whole mini‑site: a header with your logo and menu, pages of cards, charts and tables, and a footer.

If you can fill in a form, you can build a dashboard with it. There is nothing to install and no account to create. And you don’t have to start from a blank page: pick a starter template and edit from there.

Live, interactive demo

This is the real widget running on sample data — the same thing you’ll get on first load. It cycles through the tabs on its own; click anything to take over and explore. Pick a region in the slicer at the top of the Overview page and watch every card and chart below it narrow. Try the moon/sun icon for dark mode and the Edit button to open the builder (it stays in demo mode here, so nothing is saved).

The six demo pages are a guided tour: every chart type with a note on when to use it, live tables and invoices, a working calendar, and a page of the content blocks. The demo reads real tables, so search, sorting and the calendar all actually work.

Quick start — 5 steps

1. Open the widget panel in Grist. In your document, add a new widget (or convert a section) and choose the Custom widget type. Grist’s own custom widget docs cover this panel in more detail.
2. Paste the URL. In the panel settings, find Enter Custom URL and paste:
   Widget URLCopy

   https://anupress.github.io/grist-advanced-charts/

   Grist then asks whether to allow the widget full document access. Accept, and it is settled once: that is what lets it read every table and save your design.
3. Look around the demo. The widget loads with sample data so you can see what’s possible before connecting your own.
4. Click Edit → Accept. ANUPRESS shows a consent screen (explained below) that says what it writes into your document and what it never does. If you declined Grist’s access prompt in step 2, set Access level to Full document access in the widget panel first.
5. Build & publish. Install a starter template, or add blocks yourself — the guided wizard picks a chart type if you’re unsure. Then click Save & Publish. Anyone who opens the document sees your dashboard from then on.

https://anupress.github.io/grist-advanced-charts/?demo=1

Permissions & privacy

The first time you click Edit, ANUPRESS shows a short consent screen. It explains, in plain language, exactly what happens next:

• Your design is saved into your document — the layout, colours and logo live in the widget’s own settings plus a small ANUPRESS_Config table, so the dashboard reloads for anyone who opens it.
• Your tables are read so you can chart any column from any table.
• Template tables are created only when you ask — installing a template can add its sample tables, each one listed before anything is written.
• Nothing leaves Grist — there is no ANUPRESS server, no analytics, and no third‑party calls.

Grist itself asks you to allow full document access the moment you paste the URL, before anything is read or written. That is required so the widget can read every table (not just one) and save your design. You can change or revoke it any time from the widget panel in Grist, and the consent screen tells you if it is missing.

The editor at a glance

In edit mode a dark bar appears at the top. It has a handful of buttons, and that is the whole surface:

Blocks are edited on the page itself: hover any block for its drag, edit and delete buttons, or just click it to open its editor. Click the header, footer or hero to edit those directly. An Add Section tile sits at the end of every page.

Every block’s editor ends with the same collapsible Layout & style section, and it is where the fiddly placement work happens. Spacing is margin and padding for each side and a minimum height. Place on the page lets a tall block span two or three rows beside stacked ones, or sets an order; inside a Grid it becomes column span, row span and where the block sits in its cell. Look is background, border, corner radius and shadow. Visibility hides the block on phones, tablets or desktops, and while you edit a hidden block stays on screen, faded and labelled, so you can still reach it. Advanced holds a CSS id, classes and a z-index. Nothing here touches the block’s own settings; Reset clears it all, and undo brings it back.

The building blocks

The body of every page is a grid of blocks. Click Add Section and the panel opens with two ways in. At the top is a row of layouts: 1×2, 2×1, 2×2, 3×2, 3×3, 4×2 or custom. Pick one and a Grid block lands on the page with the chooser already open for its first cell, so a slicer above a chart is three clicks. Below the layouts is the single-element list, grouped so it’s easy to scan: Data & Metrics, Content, Basic Elements and Advanced. Starred entries are the ones most pages start with, a search box filters the list, and every block opens a side panel with a live preview, so you see the result while you change settings. Each block also has its own width setting, from a quarter‑width card to the full row. This page covers the blocks you’ll use first; the block-by-block tutorial documents every one of them, setting by setting.

Every data block starts with a table, and the table list shows you what you are choosing. Hover a name, or arrow onto it, and the whole space beside the editor fills with that table: its columns with their types, as many rows as fit with references resolved to names, and a line saying how much is not shown. It takes no clicks, so the mouse can pass over it. The same glance is there in the guided wizard’s first step and in a template’s table setup.

Not sure what to build? The wizard picks for you

Don’t know statistics? You don’t need to. Just below the layouts in Add Section is “Not sure? Let me help” — a short wizard that asks three plain questions:

1. Which data do you want to show? Pick a table.
2. What do you want to compare? e.g. Region, Month, Category — this becomes your groups.
3. What number do you want to see? Pick a column, or choose “Just count entries”.

It then recommends the best chart type for your columns (marked with a ★), greys out the ones that don’t fit, and shows a live preview before it adds anything to the page.

① Stat card (a single KPI)

A big number with an optional trend and a sparkline — e.g. Total Revenue, Headcount.

• Value column — the column to measure. Every column is listed; text columns are marked (text).
• Summarize by — Sum, Average, Count rows, Count values, Distinct count, Min, Max, Median or Std. deviation. Pick a text column and it switches to counting automatically.
• Trend & sparkline — Automatic uses the table’s date column for the “vs prev. period” figure; pick a different column, or turn it off.
• Icon — search a library of 509 icons as you type, browse the whole set, or upload your own.
• Number format — compact (1.2K, 3.4M) and a currency symbol.

② Charts

One Chart block, every chart type inside it. You pick the data first, and incompatible chart types grey out automatically — so you can’t build something that doesn’t make sense.

• Categories — the groups along the axis (e.g. Region, Month).
• Values — the numbers to plot (e.g. Revenue). Add a second category to split into series.
• Summarize by — the same aggregations as stat cards.
• Chart type — a grid with a ★ on the recommended type for your columns:

Extra options appear per type: Stack series, Smooth curve, Sort by value, and custom colours (or inherit the theme palette). Funnels can also be built stage by stage from separate columns, which keeps them honest when your data isn’t already cumulative.

③ Breakdown (group‑wise counts)

Counts each distinct value of a column and shows the split with coloured dots, counts and percentages — like “West 14 (29%) · East 13 (27%) · North 12 (25%)”. Empty values get their own row, so it doubles as a quick data‑quality check.

• Group by column — any column.
• Show as — List (the count rows) or a Donut / Pie / Bar / Column chart of the same counts.
• Max rows — anything beyond the limit is rolled into an “Other” row.

④ Map (latitude / longitude)

Plots a pin for every row that has coordinates, on an interactive Leaflet map with marker clustering and Street / Satellite / Terrain layers.

• Latitude / Longitude columns — auto‑detected by name (e.g. sample_latitude), or pick them.
• Popup title — the bold line in each pin’s popup (e.g. a name or code).
• Colour points by — optional category; the legend lists the colours.
• Tooltip fields — choose up to 4 columns to show in the popup (raw lat/long is never shown).

⑤ Data table

Sometimes a summary is the wrong tool and people just want the rows. The Data table block shows them: searchable, sortable by clicking a column heading, and paged.

• Columns — tick the ones that should appear. They keep the table’s own order, and the editor’s live preview gains or loses the column as you click.
• Highlights — tint a range using spreadsheet‑style references (e.g. G1:G48), so a column of profits or grades reads at a glance.
• Reference columns — a column that points at another table shows the name it points at, and search and sorting work on that name. Reference lists, choice lists and attachments display as readable text or a file count, not as raw ids.
• Print — a data table prints as a clean tabular report, not a screenshot of the widget. See Print, labels & PDF.

⑥ Invoice

Pick a row from your invoices table and this block renders it as a finished document: your details and logo, the client’s address, the line items and the totals, ready to print or save as PDF. It works two ways — a single Amount column on the invoice row, or proper itemisation from a separate line‑items table. Four visual styles ship with it, and it inherits your site’s branding.

⑦ Calendar

Point it at any table with a date column and every row becomes an event on a month view. On a live document it works in both directions: drag an event to another day and the new date is written back to your Grist table, and edits made in Grist show up on the calendar on their own, without a reload. Click an event for its details, or a day’s “+N more” link for everything on that date. Dates are read and written in the column’s own timezone, so an event logged in Sydney doesn’t drift a day when the dashboard is opened in New York.

⑧ Slicer (new in v3.2)

Every block above answers one question. A slicer lets the reader ask a different one. Pick a column, and the block shows its values as a row of chips (or a menu, once there are more than twelve). Choose North and every KPI card, chart, table, map and calendar on the page narrows to the North rows, trend deltas included. Choose two regions and you get both. Clear it and the page is whole again. The reader’s choice is never written into the design, so nobody can filter a dashboard for everyone else by accident.

Which blocks a slicer reaches is worked out for you. A block is filtered if it reads the slicer’s table, a table with a column of the same name, or a table joined to it by a reference column in either direction. That last rule is Grist’s own “select by”: a slicer on Clients narrows every table that points at Clients, and a slicer on Invoices by client narrows the clients table too. Anything else is left whole, and the editor tells you the answer before you save (“Filters 9 blocks on this page: Total Revenue, …”). If the rules pick wrong, switch Blocks to Choose and tick the ones you mean.

• Table and Column — the column’s distinct values become the choices, with a count beside each.
• Show as — Auto, Chips or Menu. Selection — several values, or one at a time.
• Blocks — Automatic, or a checklist of the blocks on this page.
• Several slicers on one page combine: a Region slicer and a Category slicer together show only the rows that match both.

⑨ Barcode (new in v3.1)

A scannable barcode drawn in the browser, like the QR code beside it, in Code 128 (any text: asset tags, internal references), EAN-13, EAN-8 or UPC-A (the digits on retail packaging). EAN and UPC work out the check digit, so a number pastes in with or without it.

The part that matters is the unit. A barcode is sized in millimetres, not pixels, because a scanner reads a linear barcode by timing bar widths against the narrowest one. A symbol the browser shrank to fit its column is a symbol that no longer scans, so this one keeps its size and overflows visibly instead. The default bar width is 0.33 mm; below about 0.25 mm many printers and hand scanners start to struggle, and the editor says so.

Put %ColumnName in the value and the barcode becomes a template: in a printout that repeats once per row, each copy carries that row’s value. That is how one block turns into a sheet of product labels. See Print, labels & PDF.

The other blocks

The rest are the pieces that turn a page of charts into a page someone might actually read:

The grid is the one that changes how you lay a page out. The quickest way to one is the layout row at the top of Add Section; the Grid tile in the list does the same with columns and rows chosen by hand. Either way every empty cell shows an Add button that opens the usual chooser. A block in a cell is edited and deleted like any other; the grid itself is edited by clicking its edge or its title. Give it a title and it draws as a card, leave the title empty and only its blocks show.

The Widget block is how the page grows past what these blocks do. Paste the URL of any custom widget, the same address you would give Grist, and it runs inside the page with the access this widget has. In the editor you choose the table it reads, or leave that blank and it follows the table this dashboard is linked to in Grist, changes included. When the widget loads in the live preview it says which columns it needs, and each one gets a picker, the same mapping step Grist would show in its own panel. Whatever the widget saves for itself, a note, a chosen view, is kept with the page. The HTML/CSS/JS block has the same table and mapping controls once its Grist access is switched on, which turns a few lines of your own code into a custom widget written in place.

Aggregations in plain English

Starter templates

A blank page is the hardest place to start, so the widget ships ten finished starting points. Each installs a complete multi‑page dashboard (pages, blocks, copy and theme) plus sample tables in your document, so every chart has data from the first second. Then you edit it like anything else, or point its blocks at your own tables.

Open them from Settings → Templates:

• Research Labs — samples, reagents, tasks and people.
• Nonprofits — donations, grants, volunteers and impact.
• Legal — matters, billable hours, invoices and expert witnesses.
• Higher Education — courses, enrolment, research funding and faculty.
• Marketing — campaigns, content, social, events and customer sentiment.
• Finance & Accounting — invoices, payroll and expenses in one cash view.
• Developers — issues, releases, incidents and uptime, dark by default.
• Small Business — pipeline, customers, team and costs.
• Sports Facility — bookings, members, classes and leagues.
• Demo dashboard — the guided tour the widget opens with, reinstallable.

Before anything is applied you get a full preview rendered with that industry’s sample data, a list of the pages included, and a per‑table setup step: for each table the template uses, either let it be created with sample data (the default) or point it at one of your own tables, with a column‑matching step so the blocks know which of your columns is which. Using your own table only reads from it.

Want a closer look at all ten, with screenshots and what’s inside each one? That got its own post:

Editing data without leaving the page

Charts are usually where you notice a wrong number. On a live document, every data block’s editor has an “Edit the data in …” button that opens the table right there: search it, sort it, filter it, correct cells, add rows. Changes are written to your Grist table when you press Save, as a single undoable step, and the block’s preview refreshes so you see the fix land. Columns Grist computes from formulas are shown read‑only, and so are reference, reference list, choice list and attachment columns, because a free-text edit there would send Grist a string where it expects a row id or a list. Each one says which reason applies. Deleting rows deliberately stays in Grist, where the document history lives.

There’s also a Refresh button on live dashboards that re‑reads every table the page uses — handy when someone edited rows in Grist while your dashboard was open.

Print, labels & PDF (updated in v3.1)

Sooner or later a dashboard has to survive on paper, usually because a board meeting or a client asked. The widget prints three ways, and all three produce documents rather than screenshots:

1. A printable layout of any blocks you choose. In view mode, every block has an Add to printout button. Collect blocks from any pages, then click Arrange & print: your selection appears on a white sheet with real page‑break guides, you resize and reorder, and print. Tables can be narrowed or capped to fit without changing the page they came from. The two exceptions are the HTML/CSS/JS and Widget blocks: an embedded frame prints as a blank rectangle, so they carry no button.
2. A single invoice. The invoice block’s print button prints just the document — the rest of the page is left out.
3. A data table as a report. Prints every row as a clean table with the site’s branding, pager removed.

Any page size, including labels

The sheet used to be A4 or US Letter. Now the toolbar offers four office sizes (A4, US Letter, A5, US Legal), four label stocks (business card 85×55, shipping 100×150, address 89×36, small 57×32), and Custom, where you type a width and height in millimetres. The margin is a field too. Label stock arrives with a margin of zero, because a die-cut label has no waste edge to give away; pick office paper again and a normal margin comes back. Preview and paper agree to the millimetre: the sheet on screen is drawn at true paper width, so the page boundaries fall where the printer will really break.

Repeat a printout once per record

Set Repeat to a table and the blocks you collected are printed once for every row of it, one to six across the sheet or each on its own page, with a cap on how many rows to take. Blocks that mean something for a single row are rebound to it: an invoice is told which row it is, and a barcode, QR code or text block with %ColumnName in it fills in that row’s value. A chart of the whole table is left alone rather than being made to look per-row. Two things this is for: a sheet of product or asset labels from a barcode block, and every unpaid invoice in one print run.

Each block on the sheet has a width control that sits above it, holds open while you try sizes, and closes with Keep or Cancel. Cancel puts the block back exactly as it was.

Dynamic subtitles (write your own, with live numbers)

Every chart, breakdown and map block has a Subtitle field. Type whatever you like, and drop in placeholders that fill in automatically. Click the small (i) next to the field to see which placeholders that block supports.

Hero & slider

Each page can start with a hero — either a gradient banner with your headline, or a full‑width image slideshow. The text is fully designable, WordPress‑style:

Show / hide per page Alignment: left / center / right Vertical: top / middle / bottom Headline size S–XL Font: serif / sans / display / mono Text colour

Add images to turn the banner into a slider, give each slide its own caption, and set auto‑play speed. Edit a hero by clicking it, or from Settings → Pages.

Pages, menu & footer

Your dashboard can have multiple pages (tabs). The menu switches between them instantly, without a reload.

• Add / rename / delete pages, and drag the grip handle to reorder them.
• Per‑page hero — every page has its own headline or slider.
• URL menu links — add external links (label + URL) that appear in the menu and open in a new tab.
• Footer — its text and links are edited from Settings → Footer, or by clicking the footer itself.

Theme & dark mode

• Colour palettes — 16 ready‑made palettes, including a colour‑blind‑safe “Accessible” one; or set your own primary and accent colours. Chart series colours come from the palette too.
• Font pairing — 7 heading/body combinations, from editorial serif to technical monospace.
• Light / Dark — toggle from the Theme panel, or with the moon/sun icon in the header. A viewer’s own choice is remembered on their device, and survives template switches.

Global design panel

Settings → Design gives you site‑wide controls that apply across both light and dark themes:

Corners: sharp → round Density: compact → roomy Content width: narrow → full Shadows: flat / soft / bold Text size: small / normal / large

Accessibility is part of the design rather than an afterthought: every control in the editor and on the published page works from the keyboard, decorative elements stay silent for screen readers, and animated counters hold still when a visitor’s system asks for reduced motion.

Saving & publishing

Click Save & Publish to write your design into your document — it’s stored in the widget’s own settings plus a small ANUPRESS_Config table, so it travels with the document and reloads for anyone who opens it. Applying a template saves immediately on its own, so there’s no window where the new tables exist but the design doesn’t. Done leaves edit mode.

To wipe the design and start again, use Settings → Templates → Start from scratch. It clears the layout, offers to remove sample tables the widget created (each one listed, nothing else), and leaves your own tables exactly as they were.

Several dashboards in one document

One document can hold more than one dashboard: Operations on one page, Finance on another, a project of its own on a third. Each widget you add to a Grist page shows one of them, and remembers which. Open Settings → Dashboards in any widget to see the list, make a new one as a copy of the current design or as a blank page, point that widget at a different one, rename, or delete. The main dashboard is the one every document starts with and cannot be deleted. Everything stays in the same ANUPRESS_Config table, one row per dashboard, so nothing about saving, templates or starting from scratch changes; those act on whichever dashboard the widget is showing.

FAQ & troubleshooting

Request a feature or send feedback

About ANUPRESS

ANUPRESS builds practical, no‑nonsense tools and honest reviews for people who run their own sites and data. If you found this useful, you might like our other hands‑on guides: