ChartsCAUTION

A framework for building agentic apps

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: charts
description: >
  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.
---

# Chart Generation

## How It Works

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.

## Script Usage

```bash
pnpm action generate-chart --type=bar --title="Title" --labels='["A","B","C"]' --data='[1,2,3]' --color="#18B4F4"
```

### Parameters

| 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                |

### Output

`{ filename, url, width, height }` — the `url` is fully qualified with cache buster.

## Color Palette

| 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` |                                    |

## Style Preferences (from Steve)

- **Minimal text on chart** — short title only, no subtitle
- **Stats and context in chat text** around the chart, not on the image
- Large fonts: title 22px, axis 13px
- Few axis labels: maxTicksLimit 8 on x-axis, 5 on y-axis
- No rotated labels (maxRotation: 0)

### Good pattern:

```markdown
**Example Corp Product Usage — Last 30 Days**
![chart](https://...your-app.example.com/api/media/chart.png?v=123)
**528 messages** over 18 active days | Peak: **89** (Feb 14)
```

## QuickChart Inline Styling (for non-script charts)

When using QuickChart (`https://quickchart.io/chart/create`) with Chart.js v2:

- Background: `#09090b` (zinc-950)
- Grid: horizontal only, dashed `[3,3]`, color `#27272a`
- Axis ticks: `#52525b`, 11px
- Title: `#fafafa`, 16px bold
- Legend: `#a1a1aa`, 11px
- Default bar/line color: `#18B4F4` (primary blue)
- Tooltips: bg `#09090b`, border `#27272a`, text `#fafafa`

## Multi-Series & Stacked Charts

- Use `--stacked=true` flag
- Pass data as `--data='[{"label":"User A","data":[...],"color":"#..."}]'`
- Script sets `stack: "stack1"` on all datasets

## Key Gotchas

- **Relative paths do NOT work** — chat UI is on a different origin. Always use the fully qualified URL from script output (uses `APP_ORIGIN`)
- Cache busting (`?v=<timestamp>`) auto-appended
- `chartjs-node-canvas` depends on `canvas` native module — `pnpm.onlyBuiltDependencies` must include `"canvas"`. If not built, run `pnpm rebuild canvas`
- Theme auto-detected from `media/theme.json` (set by the sidebar toggle via the `set-theme` action)

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (5)

.agents/skills/an

.agents/skills/content-product-development

.agents/skills/design-exploration

.agents/skills/turn-into-app

.agents/skills/visual-edit

Gates applied: no_behavioural_pass.

[![ModelsAtlas audit: Charts](https://modelsatlas.com/skills/builderio/charts/badge.svg)](https://modelsatlas.com/skills/builderio/charts/)

Not your listing, or something out of date? Claim or update your listing.