GRAPH
Generate SVG charts from data. Output is a pure <svg> element — no wrapping page, no HTML boilerplate. Embed directly in HTML output or write to file.
[pending] — GRAPH is designed and specified. Runtime implementation is in progress.
Syntax
GRAPH TYPE "bar" WITH ?data
TITLE "My Chart"
FORMAT 800 BY 400
THEME "dark"
WHERE X IS "Month" AND Y IS "Revenue"
SET ?svg
All modifiers are optional. Minimal form:
GRAPH TYPE "pie" WITH "school" AS "35%" AND "home" AS "50%" AND "play" AS "15%" SET ?svg
Modifiers
| Modifier | Syntax | Description |
|---|---|---|
| TITLE | TITLE "string" | Chart title displayed above the graph |
| FORMAT | FORMAT 800 BY 400 | Width by height in pixels |
| THEME | THEME "dark" | Colour palette. Options: "dark", "light", "ocean", "pastel" |
| WHERE | WHERE X IS "label" AND Y IS "label" AND Z IS "label" | Axis labels. Z for 3D/contour types. |
Data tiers
Tier 1 — inline key/value pairs (pie, donut, funnel, gauge, waffle, progress):
GRAPH TYPE "pie" WITH "sales" AS "40%" AND "ops" AS "35%" AND "dev" AS "25%" SET ?svg
Tier 2 — single-series variable (bar, line, area, scatter, histogram, sparkline, wave, etc.):
(* ?data = { labels: [...], values: [...] } *)
GRAPH TYPE "bar" WITH ?data TITLE "Q3 Sales" FORMAT 700 BY 350 SET ?svg
Tier 3 — multi-series variable (grouped bar, stacked area, radar, candlestick, sankey, tree, etc.):
(* ?data = { labels: [...], series: [{ name, values: [...] }] } *)
GRAPH TYPE "bar-grouped" WITH ?data TITLE "Regional Sales" SET ?svg
Graph types
| Type string | Tier | Data shape |
|---|---|---|
"bar" | 2 | {labels, values} |
"bar-grouped" | 3 | {labels, series:[{name,values}]} |
"bar-stacked" | 3 | {labels, series:[{name,values}]} |
"line" | 2 | {labels, values} |
"line-multi" | 3 | {labels, series:[{name,values}]} |
"area" | 2 | {labels, values} |
"area-stacked" | 3 | {labels, series:[{name,values}]} |
"scatter" | 2 | {points:[{x,y}]} |
"bubble" | 2 | {points:[{x,y,size}]} |
"histogram" | 2 | {values:[...]} |
"box" | 3 | {labels, series:[{name,values}]} |
"violin" | 3 | {labels, series:[{name,values}]} |
"dot" | 2 | {labels, values} |
"heatmap" | 3 | {x_labels, y_labels, matrix:[[...]]} |
"treemap" | 3 | {nodes:[{name,value,parent}]} |
"waffle" | 1/2 | inline or {segments:[{name,value}]} |
"sparkline" | 2 | {values:[...]} |
"pie" | 1/2 | inline or {segments:[{name,value}]} |
"donut" | 1/2 | inline or {segments:[{name,value}]} |
"funnel" | 1/2 | inline or {stages:[{name,value}]} |
"waterfall" | 2 | {labels, values} (negative values allowed) |
"sunburst" | 3 | {nodes:[{name,value,parent}]} |
"radar" | 3 | {axes:[...], series:[{name,values}]} |
"gauge" | 1/2 | inline or {value, min, max} |
"polar" | 3 | {labels, series:[{name,values}]} |
"candlestick" | 3 | {labels, series:[{name,ohlc:[{o,h,l,c}]}]} |
"ohlc" | 3 | same as candlestick |
"sankey" | 3 | {nodes:[{name}], links:[{source,target,value}]} |
"node-edge" | 3 | {nodes:[{id,label}], edges:[{from,to,label?}]} |
"force" | 3 | same as node-edge |
"tree" | 3 | {nodes:[{id,label,parent}]} |
"flowchart" | 3 | {nodes:[{id,label,type}], edges:[{from,to,label?}]} |
"state" | 3 | {states:[{id,label}], transitions:[{from,to,label}], initial} |
"wave" | 2 | {values:[...], sample_rate?} |
"error-bar" | 3 | {labels, series:[{name,values,errors}]} |
"contour" | 3 | {x, y, z:[[...]]} |
"gantt" | 3 | {tasks:[{name,start,end,group?}]} |
"timeline" | 3 | {events:[{label,date,group?}]} |
"calendar-heat" | 2 | {points:[{date,value}]} |
"progress" | 1/2 | inline or {value, max} |
"step" | 2 | {labels, values} |
"bullet" | 2 | {value, target, ranges:[...]} |