Chart Renderer Open

A modular, registry-driven chart generator for AI agents. Produces self-contained HTML pages with styled charts and tables — no backend required.

Design philosophy: Only load the CSS/JS/docs for chart types actually used, minimizing token waste. All information is statically readable with no hover dependency.

Available Chart Types

Full data format specs are in templates/types/{type}.md — read on demand.

Execution Steps

Step 1: Determine required types

Based on the user's request, select the needed chart types from the table above.

Step 2: Read on demand

1. Read skills/chart-renderer-open/templates/registry.json for file mappings
2. Read skills/chart-renderer-open/templates/chart_page.html for the page skeleton
3. Read skills/chart-renderer-open/templates/types/core.css for shared styles
4. For each needed type, read its .md file for data format, its .css and .js for rendering code
   • When multiple types share a file (e.g., line and dualAxis share chart.css/chart.js), do not re-read

Step 3: Assemble data

Build the CFG and SECTIONS data structures per the .md format specs.

Data injection uses JSON. The skeleton template loads data via \x3Cscript type="application/json"> + JSON.parse. Both data placeholders must contain valid JSON strings (output of JSON.stringify()). This means:

• Double quotes " in string values must be escaped as \"
• Newlines must be escaped as \
• Do not manually concatenate JS strings — construct JS objects then use JSON.stringify() to output

Step 4: Assemble HTML and replace placeholders

Step 5: Write and deliver

1. Write to docs/{chart_types}_report_{year}_{month}_{day}_{hour}_{minute}_{second}.html (no zero-padding)
2. Write to canvas hosted directory /home/admin/.openclaw/canvas/documents/report_{id}/index.html
3. Include [embed ref="report_{id}" title="Report Preview" height="600" /] in reply for inline preview

Adding New Chart Types

1. Create {typeName}.css, {typeName}.js, {typeName}.md under types/
2. In the JS file, call registerRenderer('typeName', renderFn) or registerRenderer('typeName', renderFn, afterRenderFn)
3. Add a mapping entry in registry.json
4. Add a row to the "Available Chart Types" table in this file

Notes

• Do not fabricate data the user has not provided
• Heatmap: requires at least 2 rows + 2 columns
• Line charts: require at least 2 data points
• Color scale: \x3C30% dark red / 30-45% light red / 45-55% yellow / 55-70% light green / >=70% dark green