Create PNG bar, line, and area charts for embedding in chat responses. Set labels, colors, themes, dimensions, and multiple data series, then use the returned full URL to display the chart alongside explanatory text.
Generate inline chart images (PNG) for embedding in chat responses. Use this skill when you need to create bar, line, or area charts for data visualization in chat.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
Charts are generated server-side as PNG images using chartjs-node-canvas (Chart.js) and served via /api/media/. The generate-chart script renders charts and returns a fully qualified URL for embedding in chat markdown.
pnpm action generate-chart --type=bar --title="Title" --labels='["A","B","C"]' --data='[1,2,3]' --color="#18B4F4"
| Param | Values | Default |
|---|---|---|
--type | bar, line, area | bar |
--title | Chart title (keep SHORT) | required |
--subtitle | Optional subtitle — avoid unless needed | — |
--labels | JSON array of x-axis labels | required |
--data | JSON array of numbers, OR array of {label, data, color} for multi-series | required |
--color | Primary hex color | #18B4F4 |
--theme | dark, light | auto from media/theme.json |
--stacked | true for stacked bars | false |
--filename | Output filename (no ext) | auto from title |
--width / --height | Image dimensions | 800x400 |
{ filename, url, width, height } — the url is fully qualified with cache buster.
| Color | Hex | Use |
|---|---|---|
| Blue | #18B4F4 | Default/primary for all charts |
| Purple | #8b5cf6 | Secondary |
| Green | #22c55e | Tertiary |
| Amber | #f59e0b | |
| Indigo | #6366f1 | |
| Red | #ef4444 | |
| Teal | #14b8a6 | |
| Orange | #f97316 |
**Example Corp Product Usage — Last 30 Days**
**528 messages** over 18 active days | Peak: **89** (Feb 14)
When using QuickChart (https://quickchart.io/chart/create) with Chart.js v2:
#09090b (zinc-950)[3,3], color #27272a#52525b, 11px#fafafa, 16px bold#a1a1aa, 11px#18B4F4 (primary blue)#09090b, border #27272a, text #fafafa--stacked=true flag--data='[{"label":"User A","data":[...],"color":"#..."}]'stack: "stack1" on all datasetsAPP_ORIGIN)?v=<timestamp>) auto-appendedchartjs-node-canvas depends on canvas native module — pnpm.onlyBuiltDependencies must include "canvas". If not built, run pnpm rebuild canvasmedia/theme.json (set by the sidebar toggle via the set-theme action)No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.
Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.
Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.
Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.
Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.
Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.