echarts · rebyteai-template — Claude Code skill: pyecharts charts and HTML reports
This skill hands your agent working pyecharts recipes: bars, lines, pies, heatmaps, and a self-contained HTML report.
npx skills add rebyteai-template/rebyte-skills --skill echarts -a claude-codeWhat echarts does
The skill covers chart building with pyecharts, the Python wrapper around Apache ECharts. It ships code samples for bar and line charts, pies, heatmaps and scatter plots, plus theme setup for macarons, shine, roma, vintage, dark and light.
A separate section walks through HTML reports: charts get added to a Page with a simple layout and rendered into one file with embedded JavaScript. Number formatting for tooltips and axis labels is covered too, like {b}: ${c:,.2f} for currency.
The part worth reading first is browser compatibility. Data has to be converted with .tolist() — pass a numpy array or a pandas Series and the chart may render blank. That is the usual failure point. The skill also lists fixes for empty charts, cramped sizing, overlapping labels and long legends.
What it helps with
- build a bar chart from pandas data
- combine several charts into one HTML report
- add a moving average line to a time series
- mark anomalies on a scatter plot
- pick a theme for the charts
Example prompts for the agent
- build a pyecharts bar chart of cost by service and save it as HTML
- make a line chart with a 7-day moving average
- combine several charts into a single report file
How to install echarts
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill echarts -a claude-code2Manually: put the files in place
~/.claude/skills/echarts/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/echarts/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill echarts -a codex2Manually: put the files in place
.agents/skills/echarts/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill echarts -a cursor2Manually: put the files in place
.cursor/skills/echarts/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rebyteai-template/rebyte-skills echarts2Manually: put the files in place
.github/skills/echarts/SKILL.md1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill echarts -a gemini-cli2Platform CLI
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path echartsManually: put the files in place
.devin/skills/echarts/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill echarts -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about echarts
How do I install echarts in Claude?
Run npx skills add rebyteai-template/rebyte-skills --skill echarts -a claude-code. The skill file lands at ~/.claude/skills/echarts/SKILL.md.
What does the echarts skill do?
It gives the agent code templates for pyecharts charts and HTML report assembly, along with fixes for common rendering problems.
Why is my chart blank?
Most likely a numpy array or pandas Series went into add_xaxis or add_yaxis. Convert the data with .tolist() first.
Similar skills
All skills for Data and databases →echarts by other authors comes first.
