# Echarts Chart Skill

> Generate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart generation, auto chart selection from data, or embeddable chart previews.

- Skill: `davaded/echarts-chart-skill` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add davaded/echarts-chart-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/davaded/echarts-chart-skill/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: davaded (https://skillmd.com/u/davaded)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/davaded/echarts-chart-skill

---


# ECharts Chart Skill

Use this skill when the user wants chart output from a short description or from table-like data.

## Workflow

1. Translate the user's request into a `ChartRequest` JSON object.
2. If the chart type is unclear, run the recommendation command first.
3. Run the generation command to produce a stable ECharts option.
4. Run the render command when the user wants an embeddable `html` or `svg`.

## Files

- Core types: `src/types/chart.ts`
- Chart recommendation: `src/core/recommend.ts`
- Option generation: `src/core/spec-to-option.ts`
- Rendering: `src/core/render.ts`
- Sample input: `examples/study-progress.request.json`
- Universal metadata: `manifest.yaml`, `agents/openai.yaml`

## Setup

```powershell
npm install
```

## Output rules

- `--out` writes to an exact file path.
- `--out-dir` writes the default file into a directory you choose.
- `desktop` and `home` are valid aliases for `--out-dir` when the user explicitly asks for those locations.
- `~` is expanded to the current user's home directory.
- If no output path is provided, files default to the current working directory.

## Commands

```powershell
node dist/cli/recommend-chart.js --input examples\study-progress.request.json
node dist/cli/generate-chart.js --input examples\study-progress.request.json
node dist/cli/render-chart.js --input option.json --format html
node dist/cli/render-chart.js --input option.json --format svg --out D:\reports\study-chart.svg
```

Default output filenames:

- Recommendation: `spec.json`
- Option: `option.json`
- HTML preview: `preview.html`
- SVG preview: `preview.svg`

## `ChartRequest` shape

```json
{
  "title": "Monthly study completion",
  "dataset": [
    { "day": "2026-03-01", "completionRate": 62, "targetRate": 75 },
    { "day": "2026-03-02", "completionRate": 68, "targetRate": 75 }
  ],
  "goal": "trend",
  "xField": "day",
  "yField": "completionRate",
  "series": [
    { "name": "Completion", "field": "completionRate" },
    { "name": "Target", "field": "targetRate" }
  ]
}
```

## Guidance

- Prefer deterministic field mapping over free-form inference when the user has already named fields.
- For pie charts, keep one category field and one metric field.
- For scatter charts, require numeric `xField` and `yField`.
- If the user only gave natural language, construct the smallest valid `ChartRequest` before calling scripts.
- If the user needs a report artifact, render `html` first and `svg` second.