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
- Read
skills/chart-renderer-open/templates/registry.jsonfor file mappings - Read
skills/chart-renderer-open/templates/chart_page.htmlfor the page skeleton - Read
skills/chart-renderer-open/templates/types/core.cssfor shared styles - For each needed type, read its
.mdfile for data format, its.cssand.jsfor rendering code- When multiple types share a file (e.g.,
lineanddualAxissharechart.css/chart.js), do not re-read
- When multiple types share a file (e.g.,
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
- Write to
docs/{chart_types}_report_{year}_{month}_{day}_{hour}_{minute}_{second}.html(no zero-padding) - Write to canvas hosted directory
/home/admin/.openclaw/canvas/documents/report_{id}/index.html - Include
[embed ref="report_{id}" title="Report Preview" height="600" /]in reply for inline preview
Adding New Chart Types
- Create
{typeName}.css,{typeName}.js,{typeName}.mdundertypes/ - In the JS file, call
registerRenderer('typeName', renderFn)orregisterRenderer('typeName', renderFn, afterRenderFn) - Add a mapping entry in
registry.json - 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