Chart Renderer Open

Render structured data into polished, self-contained HTML pages with heatmaps, trend lines, category cards, styled tables, and more. Screenshot/download ready. Suitable for any data visualization scenario — reports, dashboards, comparisons, and analyses.

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