Studio-style editor for the live chart contract. Pick a card to edit a chart type or the shared system rules.
Generated Charts
No charts generated yet. Use the Generator tab to create charts.
Sources
Every dataset and analysis the studio's charts draw from. Each card links straight to the source and shows how much it's used. Click a card to see its charts in the Gallery — or set a cadence to auto-draft fresh ideas.
Drafts one chart to the Gallery on the day(s) you pick.
Generate a new chart
Select a category to configure system-level design tokens.
Chart Generator
Create charts from your Google Sheets and Dealroom data. Pick a chart type, set a focus, and generate.
CLI & API Reference
Two ways to generate on-brand Dealroom charts programmatically — both use the same chart contract and template engine as this Config Studio.
CLI — dealroom-chart.mjs
The CLI lives at cli/dealroom-chart.mjs in the repo. It reads the chart contract locally and outputs standalone HTML — no server needed.
# List all available chart types
node cli/dealroom-chart.mjs types
# Get an example spec to modify
node cli/dealroom-chart.mjs spec-example stackedBar > spec.json
# Generate chart and open in browser
node cli/dealroom-chart.mjs create --spec spec.json -o chart.html --open
# Pipe from another tool
cat spec.json | node cli/dealroom-chart.mjs create -o chart.html
# Print the chart contract (design tokens)
node cli/dealroom-chart.mjs contract
# Print as AI-readable prompt (for LLM workflows)
node cli/dealroom-chart.mjs contract --prompt
The CLI supports all 21 chart types: bar, horizontalBar, line, stepLine, stackedBar, percentStackedBar, doughnut, groupedBar, multiLine, areaChart, stackedArea, horizontalStackedBar, pie, radar, waterfall, scatter, boxPlot, geoMap, choropleth, cartogram, marketMap.
API — POST /api/create-chart
The HTTP API accepts a chart spec as JSON and returns standalone HTML. It runs on Cloudflare Workers and reads the same chart contract from KV storage.
# Generate a stacked bar chart via the API
curl -X POST https://dealroom.co/api/create-chart \
-H "Content-Type: application/json" \
-d '{
"chartType": "stackedBar",
"headline": "VC funding by stage",
"subtitle": "2020–2024, in billions",
"labels": ["2020", "2021", "2022", "2023", "2024"],
"datasets": [
{ "label": "Seed", "data": [8, 12, 10, 9, 11] },
{ "label": "Series A", "data": [15, 22, 18, 14, 17] },
{ "label": "Series B+", "data": [30, 55, 40, 28, 35] }
],
"unit": "$B",
"source": "Dealroom.co",
"theme": "light"
}' -o chart.html
# Get API documentation and examples
curl https://dealroom.co/api/create-chart
The API returns the HTML directly. Default theme is light. Add "theme": "dark" for dark mode.
Chart Spec Format
Both the CLI and API accept the same JSON spec. Required fields depend on chart type:
| chartType | Required. One of the 18 supported types. |
| headline | Chart title. Also accepts title as alias. |
| subtitle | Optional context line below the title. |
| labels | X-axis categories (required for Chart.js types). |
| datasets | Array of { label, data: number[] } |
| unit | Value format: $B, $M, %, count, etc. |
| theme | light (default) or dark |
| source | Attribution text (default: "Dealroom.co"). |
Map Chart Specs
Map types (geoMap, choropleth, cartogram) use D3.js + TopoJSON instead of Chart.js. They don't use labels/datasets — each has its own data format:
Common map fields
| region | world (default), europe, us, mena, asia, americas, africa, nordics, uk, benelux, dach, netherlands, germany, france, italy, and more |
| scope | Sub-national choropleth: us-states, nl-municipalities, de-states, fr-departments, it-regions, uk-regions |
geoMap
City markers + flow arcs
markers: [
{ lat, lng, name,
value, color? }
]
arcs: [
{ fromLat, fromLng,
toLat, toLng, value }
]
choropleth
Filled regions by value
regions: [
{ id, label,
shortLabel, value }
]
// id = ISO 3166-1
// numeric code
cartogram
Shapes scaled by value
nodes: [
{ id, label,
shortLabel, value }
]
// id = ISO 3166-1
// numeric code
# Generate a choropleth via the API
curl -X POST https://dealroom.co/api/create-chart \
-H "Content-Type: application/json" \
-d '{
"chartType": "choropleth",
"headline": "AI startup density across Europe",
"subtitle": "Companies per capita, 2026",
"region": "europe",
"regions": [
{ "id": "826", "label": "United Kingdom", "shortLabel": "UK", "value": 95 },
{ "id": "276", "label": "Germany", "shortLabel": "DE", "value": 72 },
{ "id": "250", "label": "France", "shortLabel": "FR", "value": 68 }
],
"source": "Dealroom.co"
}' -o chart.html
# Generate a cartogram via CLI
node cli/dealroom-chart.mjs spec-example cartogram > spec.json
node cli/dealroom-chart.mjs create --spec spec.json -o chart.html --open
Common ISO country codes: UK=826, US=840, DE=276, FR=250, NL=528, SE=752, ES=724, CH=756, IE=372, IT=380, NO=578, DK=208, FI=246, PL=616, AT=40, BE=56, PT=620, CZ=203.
Market Map Spec
The marketMap type renders a masonry grid of sector cards with company logos. It doesn't use labels/datasets — it uses groups:
| groups | Array of sector/category objects (required) |
| groups[].name | Sector name (e.g. "Fintech", "AI") |
| groups[].companies | Array of { name, logo? } — logo is a domain name (e.g. "stripe.com") |
| groups[].count | Total companies in sector (shown in header, drives "+N more") |
| groups[].value | Formatted value string (e.g. "$3T", "$180B") |
| groups[].growth | Growth label (e.g. "+1.8x", "+3.6x") — shown in green |
| maxPerGroup | Max companies shown per card before "+N more" (default: 20) |
# Generate a market map via the API
curl -X POST https://dealroom.co/api/create-chart \
-H "Content-Type: application/json" \
-d '{
"chartType": "marketMap",
"headline": "European Unicorns by Sector",
"subtitle": "350+ unicorns across 12 sectors",
"groups": [
{
"name": "Fintech",
"count": 62,
"value": "$180B",
"growth": "+1.8x",
"companies": [
{ "name": "Revolut", "logo": "revolut.com" },
{ "name": "Klarna", "logo": "klarna.com" },
{ "name": "N26", "logo": "n26.com" }
]
},
{
"name": "AI",
"count": 48,
"value": "$120B",
"growth": "+3.6x",
"companies": [
{ "name": "Mistral AI", "logo": "mistral.ai" },
{ "name": "DeepL", "logo": "deepl.com" }
]
}
]
}' -o chart.html
# Via CLI
node cli/dealroom-chart.mjs spec-example marketMap > spec.json
node cli/dealroom-chart.mjs create --spec spec.json -o chart.html --open
Company logos are fetched from Google Favicons using the domain name. If the logo fails to load, a colored initial is shown as fallback.
Workflow: Using the CLI with AI Agents
The CLI is designed to work with AI coding agents (Claude Code, Cursor, etc.). The recommended workflow:
- Get the contract — run
node cli/dealroom-chart.mjs contract --promptto get the full design system as an AI-readable prompt. - Create a spec — write a JSON file with your data, or start from an example:
node cli/dealroom-chart.mjs spec-example stackedBar - Generate — run
node cli/dealroom-chart.mjs create --spec spec.json -o charts/my-chart.html --open - Add to /resources — add a chart entry to the
chartsarray inresources.html
The CLI uses the same generateChartHtml() function and chart contract as this Config Studio — design tokens, colors, typography, logo sizing, and direct labels all come from the same source of truth.
SVG Logos
All SVG logos available in the chart system. Logos marked NEEDS IMPROVEMENT are approximated and should be replaced with official assets.
Core — Dealroom
Partner Logos (co-branding)
Used via coBranding: [{ name: "waldenCatalyst" }] in the chart spec.
Company Logos
Company / startup wordmarks used in chart overlays (e.g. the UK AI VC share chart). White variant for dark or coloured backgrounds, navy for light. Defined in functions/lib/company-logos.js.
Inline / Embedded
Logos embedded directly in chart template source code.
Extracted PDFsBeta
Structured data pulled from Dealroom report PDFs. Open one to see its charts and turn any extracted table or chart into a Studio chart.
No PDFs extracted yet.
Click Extract latest reports to pull structured data from recent Dealroom report PDFs.
How charts get made
There are several ways to make a Dealroom chart — a prompt, a pill, Sarah, the daily scout, the API — but they all converge on the same render engine and design contract, land in the Gallery, and go out as PNGs, social posts, or embeds. This is also my working mental model of the system; if a box or arrow looks wrong, tell me and I'll fix it.