Studio-style editor for the live chart contract. Pick a card to edit a chart type or the shared system rules.
No charts generated yet. Use the Generator tab to create charts.
Select a category to configure system-level design tokens.
Create charts from your Google Sheets and Dealroom data. Pick a chart type, set a focus, and generate.
Two ways to generate on-brand Dealroom charts programmatically — both use the same chart contract and template engine as this Config Studio.
dealroom-chart.mjsThe 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.
POST /api/create-chartThe 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.
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 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.
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.
The CLI is designed to work with AI coding agents (Claude Code, Cursor, etc.). The recommended workflow:
node cli/dealroom-chart.mjs contract --prompt to get the full design system as an AI-readable prompt.node cli/dealroom-chart.mjs spec-example stackedBarnode cli/dealroom-chart.mjs create --spec spec.json -o charts/my-chart.html --opencharts array in resources.htmlThe 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.
All SVG logos available in the chart system. Logos marked NEEDS IMPROVEMENT are approximated and should be replaced with official assets.
Used via coBranding: [{ name: "waldenCatalyst" }] in the chart spec.
Logos embedded directly in chart template source code.