SSF Charts

An open-source, think-cell-style chart add-in for PowerPoint, built on Office.js.

SSF Charts gives you the charts consultants reach for think-cell to make — waterfalls, Mekko/Marimekko, stacked and clustered columns, 100% charts, lines and areas — with think-cell's signature annotations (CAGR arrows, difference arrows, value lines, column totals, smart segment labels), inserted into the slide as native, fully editable PowerPoint shapes rather than an opaque OLE object.

Every chart above is produced by the same layout engine the PowerPoint add-in uses — here rendered to SVG, in PowerPoint rendered as native editable shapes.

Try it

• Live demo gallery (no install, renders in the browser): https://ssf-chart.struktureretsundfornuft.dk/
• Install in PowerPoint (sideload the add-in):
  1. Download manifest-prod.xml from the latest release (Excel companion: manifest-excel-prod.xml).
  2. PowerPoint on the web → open a deck → Home ▸ Add-ins ▸ More add-ins ▸ My Add-ins ▸ Upload My Add-in → pick the manifest. (Desktop Windows/Mac: see the publishing runbook.)
  3. The SSF Charts group appears on the Home tab — open the pane and insert.
  • Requires PowerPoint with the Office PowerPointApi 1.10+ requirement set: Microsoft 365 on Windows from Version 2601, Mac 16.105+, or PowerPoint on the web. Not volume-licensed/LTSC Office or iPad — Microsoft lists 1.6 and later as Not available there, so no update brings them into range.
• Use it from Claude (headless chart generation): the skill-latest release ships ssf-charts.zip — upload it under claude.ai → Settings → Capabilities → Skills.

Feature overview

User manual — how to use the pane, the datasheet conventions, and every option.

Capability	SSF Charts
Stacked / clustered / 100% column charts	✅
Stacked waterfall (multi-series deltas)	✅
Clustered-stacked charts (blank datasheet rows split stacks)	✅
Rotation for waterfall & Mekko (not just columns)	✅
Global label de-collision pass (outside labels never overlap)	✅
Datasheet formulas (=B2-B3, SUM/AVG/MIN/MAX, ranges)	✅
Saved chart templates	✅ (localStorage)
Corporate style file (import/export JSON defaults)	✅
Deck-level style (travels with the .pptx, not the browser)	✅ (custom XML part, PowerPointApi 1.7)
Same Scale on the current selection	✅
Scatter partition lines, trend line, group legend	✅ (X line/Y line/Trend rows)
Gantt weeks + weekend shading, section headers, indent, remarks	✅ (> prefix, Activity | Owner | Remark)
Gantt holidays + bracket annotations	✅ (Holiday, Bracket <label> rows)
Gantt numeric table columns (cost / FTE / days)	✅ (Column <label> rows, beside the task labels)
Gantt working-day timeline (bar length = working days)	✅ (gantt.workdays; true = Mon–Fri, or ISO weekday numbers)
Scatter/bubble marginal distribution histograms	✅ (decorations.marginals: "x"/"y"/"both"; bins subdivide the axis ticks)
Bubble overlap relief along one axis (disclosed)	✅ (scatter.spread: "x"/"y" + spreadLimit; cap printed in the footnote)
Scatter/bubble marker symbols per group	✅ (scatter.markers; preset geometry, area-matched, legend draws the shapes)
Heatmap sign marks (greyscale-safe diverging)	✅ (heatmap.symbols: "sign"; +/− where no value label carries the sign)

How it works

datasheet / config ──▶ layout engine (pure TS) ──▶ scene graph ──▶ SVG renderer (preview, tests)
                                                              └──▶ Office.js renderer (native shapes)

• src/core — the layout engine. Pure TypeScript, no Office.js dependency: chart layouts, value scales with nice ticks, label fitting/contrast, decorations. Deterministic and fully unit-testable.
• src/render/svg.ts — renders a scene to SVG for the live preview, the demo gallery, and visual tests.
• src/render/powerpoint.ts — renders the same scene as native PowerPoint shapes via the Office.js Shape API (addGeometricShape, addLine, addTextBox), then groups them. Every bar, label and arrow stays editable in PowerPoint.
• src/taskpane — the add-in UI: chart gallery, editable datasheet (paste straight from Excel), decoration toggles, live preview, insert button.

See docs/ARCHITECTURE.md for design details and docs/RESEARCH.md for the deep research on think-cell that informed this clone.

Getting started

npm install
npm run dev        # http://localhost:3000 — demo gallery (no PowerPoint needed)
npm test           # unit tests for the layout engine
npm run build      # production bundle

Try it without PowerPoint

Open http://localhost:3000/ for the gallery, or http://localhost:3000/src/taskpane/taskpane.html for the full task-pane UI — outside PowerPoint the Download SVG button replaces slide insertion.

Sideload into PowerPoint

1. Serve the add-in over HTTPS (npx office-addin-dev-certs install, then point server.https in vite.config.ts at the generated certs).
2. Sideload manifest.xml:
   • PowerPoint on the web: Insert → Add-ins → Upload My Add-in.
   • Windows/Mac desktop: see the Office add-in sideloading docs.
3. Open the SSF Charts button on the Home tab, pick a chart, paste data, and hit Insert into slide.

Requires PowerPoint with PowerPointApi 1.10+ — Microsoft 365 on Windows from Version 2601, Mac 16.105+, or PowerPoint on the web. Raised from 1.4 on 2026-09-13.

Why the floor is high, since it costs reach. Grouping needs 1.8, so below it a chart arrives as ~40 loose shapes rather than one object. Shape rotation needs 1.10, and without it pie slices, doughnuts, sunbursts, radial bars and CAGR arrows cannot be drawn at all: measured over the 123 charts shipped here, 18 lose ink and 9 lose their subject entirely. The add-in used to degrade — insert a complete picture and say so — and that path is gone with the floor, because on every host now admitted it can never trigger. The reasoning, including why a lower floor enlarges rather than narrows what Microsoft certifies, is in manifest.xml.

Datasheet conventions

• Row 1 = category names, column A = series names — the same mental model as think-cell's internal datasheet. ⇄ Transpose swaps the two.
• Paste a range straight from Excel (TSV) into any cell. Numbers read the way Excel shows them: (1,234) is negative, a currency sign or a space-grouped thousand (1 234) is fine, and a European block (1.234,50) is converted.
• Waterfall: one series of deltas; type e (or =) in a cell to draw a computed running total at that category, exactly like think-cell's e cells.
• 100%= row: name a row 100%= to set per-category denominators for 100% charts — columns whose series sum to less stay short of full height.
• X extent row: name a row X or X extent to give a Mekko explicit column widths (think-cell's "Mekko with units").
• Re-editing: select an inserted SSF chart on the slide and press Edit selected chart — the pane reloads its data and "Update chart" replaces it in place.

Disclaimer

SSF Charts is an independent open-source project. It is not affiliated with, endorsed by, or derived from think-cell Software GmbH. "think-cell" is a trademark of its owner; it is referenced here only to describe compatibility of concepts.