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.
| 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.
Based on the user's request, select the needed chart types from the table above.
skills/chart-renderer-open/templates/registry.json for file mappingsskills/chart-renderer-open/templates/chart_page.html for the page skeletonskills/chart-renderer-open/templates/types/core.css for shared styles.md file for data format, its .css and .js for rendering codeline and dualAxis share chart.css/chart.js), do not re-readBuild the CFG and SECTIONS data structures per the .md format specs.
Data injection uses JSON. The skeleton template loads data via