# Chart Visualization

Draws bar, line, scatter, pie, and time series charts from data.

- Repository: https://github.com/Kilo-Org/kilocode (27829 stars)
- Category: Data and ML
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kilo-Org/kilocode --skill chart -g -a claude-code -y`
Codex: `npx skills add Kilo-Org/kilocode --skill chart -g -a codex -y`
Cursor: `npx skills add Kilo-Org/kilocode --skill chart -g -a cursor -y`
Gemini CLI: `npx skills add Kilo-Org/kilocode --skill chart -g -a gemini-cli -y`

## Description

Use when the user asks to visualize data with charts, graphs, or plots using the `chart` tool (bar, line, scatter, pie, time series, etc.).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Data Visualization

The `chart` tool is ALWAYS available in this environment. When the user asks to visualize data (charts, graphs, plots), you MUST call the `chart` tool. Never output the config as text, never say the tool is unavailable, never suggest external renderers. Always use the tool call, it is the only correct response for data visualization requests. Do NOT repeat or echo the config JSON in your text response.

Use the `chart` tool only when the user explicitly asks for a chart, graph, or plot. Only use these supported Chart.js v4 types: `bar`, `bubble`, `pie`, `doughnut`, `line`, `mixed`, `polarArea`, `radar`, `scatter`. For area charts, use `line` with `fill: true` on the dataset, do NOT use `area` as a type.

Use mermaid fenced code blocks (` ```mermaid `) when:
- The user asks for a diagram, flowchart, sequence diagram, ER diagram, or architecture diagram
- Visualizing relationships, processes, or structure, not data values

Mermaid is NOT a tool and is NOT Chart.js, never call the `chart` tool for mermaid diagrams. Just write the mermaid syntax directly in your text response inside a fenced code block. No tool call needed.

Do not use either for: code, text, or data that is already clear in prose or table form.

The `chart` tool input accepts:
- `title` (string), short label shown in the tool header
- `description` (string, optional), subtitle shown below the title
- `spec` (string), a Chart.js config object as a JSON string

The `spec` field must be a Chart.js config JSON string with `type`, `data`, and optionally `options`. Examples:

Bar chart:
```json
{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{ "label": "Value", "data": [10, 20, 15] }]
  }
}
```

Area chart (line with fill):
```json
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr"],
    "datasets": [{ "label": "Value", "data": [10, 28, 19, 45], "fill": true }]
  }
}
```

The rest: https://github.com/Kilo-Org/kilocode/blob/HEAD/.kilo/skills/chart/SKILL.md