Chart Generation

How It Works

Charts are generated server-side as PNG images using chartjs-node-canvas (Chart.js) and served via /api/media/. The generate-chart script renders charts and returns a fully qualified URL for embedding in chat markdown.

Script Usage

pnpm action generate-chart --type=bar --title="Title" --labels='["A","B","C"]' --data='[1,2,3]' --color="#18B4F4"

Parameters

Param	Values	Default
--type	bar, line, area	bar
--title	Chart title (keep SHORT)	required
--subtitle	Optional subtitle — avoid unless needed	—
--labels	JSON array of x-axis labels	required
--data	JSON array of numbers, OR array of {label, data, color} for multi-series	required
--color	Primary hex color	#18B4F4
--theme	dark, light	auto from media/theme.json
--stacked	true for stacked bars	false
--filename	Output filename (no ext)	auto from title
--width / --height	Image dimensions	800x400

Output

{ filename, url, width, height } — the url is fully qualified with cache buster.

Color Palette

Color	Hex	Use
Blue	#18B4F4	Default/primary for all charts
Purple	#8b5cf6	Secondary
Green	#22c55e	Tertiary
Amber	#f59e0b
Indigo	#6366f1
Red	#ef4444
Teal	#14b8a6
Orange	#f97316

Style Preferences (from Steve)

• Minimal text on chart — short title only, no subtitle
• Stats and context in chat text around the chart, not on the image
• Large fonts: title 22px, axis 13px
• Few axis labels: maxTicksLimit 8 on x-axis, 5 on y-axis
• No rotated labels (maxRotation: 0)

Good pattern:

**Example Corp Product Usage — Last 30 Days**
![chart](https://...your-app.example.com/api/media/chart.png?v=123)
**528 messages** over 18 active days | Peak: **89** (Feb 14)

QuickChart Inline Styling (for non-script charts)

When using QuickChart (https://quickchart.io/chart/create) with Chart.js v2:

• Background: #09090b (zinc-950)
• Grid: horizontal only, dashed [3,3], color #27272a
• Axis ticks: #52525b, 11px
• Title: #fafafa, 16px bold
• Legend: #a1a1aa, 11px
• Default bar/line color: #18B4F4 (primary blue)
• Tooltips: bg #09090b, border #27272a, text #fafafa

Multi-Series & Stacked Charts

• Use --stacked=true flag
• Pass data as --data='[{"label":"User A","data":[...],"color":"#..."}]'
• Script sets stack: "stack1" on all datasets

Key Gotchas

• Relative paths do NOT work — chat UI is on a different origin. Always use the fully qualified URL from script output (uses APP_ORIGIN)
• Cache busting (?v=<timestamp>) auto-appended
• chartjs-node-canvas depends on canvas native module — pnpm.onlyBuiltDependencies must include "canvas". If not built, run pnpm rebuild canvas
• Theme auto-detected from media/theme.json (set by the sidebar toggle via the set-theme action)