graphic-chart
Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6. 1080×1080px default, 5 style presets, highlight annotations. Trigger when user says "create a chart", "visualize data", "make a bar chart", "line graph", "pie chart", "data visualization", "chart this data", "plot", "graph", or "visualize these numbers".
npx skills add Varnan-Tech/opendirectory --skill graphic-chart --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# graphic-chart Generates data visualization charts as PNG. Renders HTML with Apache ECharts v6 in headless Chromium via Playwright → screenshots at 2× retina quality. CDN: `https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js` --- ## Critical Rules (read before every generation) 1. **`area` type → `type: 'line'` + `areaStyle: {}`** — ECharts has no `type: 'area'`. 2. **`doughnut` → `type: 'pie'` + `radius: ['40%', '70%']`** — ECharts has no `type: 'doughnut'`. 3. **Readiness signal: register `chart.on('finished', fn)` BEFORE `chart.setOption()`** — ECharts bug #14101/#17500: if listener is registered after setOption, it silently never fires. Always register both `finished` and `rendered` events before setOption. 4. **`xAxis.type: 'category'` must be explicit** — ECharts does not infer it from the data. Forgetting this produces a blank chart. 5. **Category labels go in `xAxis.data`**, not in a `data.labels` array. ECharts structure is flat: `{ xAxis, yAxis, series, grid, title, legend }` — not nested under `data` or `options`. 6. **Data labels are fully built-in** — use `label: { show: true }` on any series. No plugin needed. 7. **Highlight a specific bar/point via per-it
- Critical Rules (read before every generation)
- Step 1: Intake
- Step 2: Internal Architecture (never shown to user)
- Step 3: HTML Generation
- Step 4: Self-QA (fix every failure before Step 5)
- Step 5: Export
- Step 6: Output Summary
- Prompt Tips (show when user asks for guidance)
mkdir -p chart/[slug] open chart/[slug]/chart.html bash [skill-root]/scripts/export-chart.sh \
What does the graphic-chart skill do?
Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6. 1080×1080px default, 5 style presets, highlight annotations. Trigger when user says "create a chart", "visualize data", "make a bar chart", "line graph", "pie chart", "data visualization", "chart this data", "plot", "graph", or "visualize these numbers".
How do I install it?
Run `npx skills add Varnan-Tech/opendirectory --skill graphic-chart --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Varnan-Tech/opendirectory, a repository with 571 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.