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

| type | Name | Description | |------|------|-------------| | heatmap | Matrix Heatmap Table | Multi-row x multi-column numeric matrix with color-coded cells, change arrows, and trend badges | | layered | Tiered Category Cards | Three-tier color-coded cards (green/blue/red) for categorizing items by performance level | | direction | Recommendation Cards | Dual-column cards with auto-matched icons and color themes | | line | Multi-series Line Chart | Chart.js multi-line chart with optional data labels | | dualAxis | Dual-axis Line Chart | Chart.js dual Y-axis: primary series (area fill) + secondary series (dashed line) | | table | Styled Table | Clean white-background table with auto-coloring for ↑/↓ prefixed cells | | text | Text Block | Colored callout blocks: success (green) / warning (yellow) / danger (red) |

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 <script 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 \n
• Do not manually concatenate JS strings — construct JS objects then use JSON.stringify() to output

Step 4: Assemble HTML and replace placeholders

| Placeholder | Fill with | |-------------|-----------| | {{PAGE_TITLE}} | Page title | | <!--__CDN_LIBS__*/ | CDN scripts (include Chart.js + datalabels when line/dualAxis used; always include html2canvas) | | /*__CORE_CSS__*/ | core.css content | | /*__TYPE_CSS__*/ | Concatenated CSS for needed types | | /*__TYPE_JS__*/ | Concatenated JS for needed types | | /*__CFG__*/{}/*__END__*/ | JSON string of CFG object | | /*__SECTIONS__*/[]/*__END__*/ | JSON string of SECTIONS array |

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: <30% dark red / 30-45% light red / 45-55% yellow / 55-70% light green / >=70% dark green