Generates PNG charts (bar, line, area, pie, doughnut, scatter, radar, treemap) from data using Apache ECharts v6 via Playwright. Includes 5 styles, annotations, custom titles.
npx claudepluginhub varnan-tech/opendirectory --plugin opendirectory-gtm-skillsThis skill uses the workspace's default tool permissions.
Generates data visualization charts as PNG. Renders HTML with Apache ECharts v6 in headless Chromium via Playwright → screenshots at 2× retina quality.
Guides selection of optimal chart types for data insights and generates reproducible code using matplotlib/seaborn (Python) or Chart.js (JavaScript). Covers anatomy, colors, accessibility, pitfalls.
Generates charts like bar, line, pie, scatter, heatmaps from data using Matplotlib. Analyzes structure, customizes styles, adds interactivity, exports to PNG, SVG, HTML.
Generates OpenChart VizSpec JSON for charts, tables, graphs, and sankeys from data. Guides chart selection, encoding rules, and editorial design like colors, typography, and annotations.
Share bugs, ideas, or general feedback.
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
area type → type: 'line' + areaStyle: {} — ECharts has no type: 'area'.doughnut → type: 'pie' + radius: ['40%', '70%'] — ECharts has no type: 'doughnut'.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.xAxis.type: 'category' must be explicit — ECharts does not infer it from the data. Forgetting this produces a blank chart.xAxis.data, not in a data.labels array. ECharts structure is flat: { xAxis, yAxis, series, grid, title, legend } — not nested under data or options.label: { show: true } on any series. No plugin needed.itemStyle — put { value: N, itemStyle: { color: '#...' } } directly in the data array. Do NOT use Chart.js-style backgroundColor arrays.<div> container, not <canvas> — echarts.init(document.getElementById('chart')). The container div needs explicit dimensions.animation: false in option — disables animation for instant render. Still register finished + rendered events before setOption for the readiness signal.padding: 64px 80px and .chart-container { max-height: 860px } — prevents edge-to-edge fill when no title.Required: chart_type, data
Optional parameters and defaults:
| Parameter | Default | Description |
|---|---|---|
| chart_type | — | bar / line / area / pie / doughnut / scatter / radar / treemap |
| data | — | JSON array or CSV — required |
| title | — | States the insight, ≤10 words |
| subtitle | — | 1-sentence context line |
| style | clean-slate | clean-slate / midnight-editorial / matt-gray / electric-burst / brutalist |
| dimensions | 1080x1080 | WxH pixels (output PNG = 2× via deviceScaleFactor) |
| x_label | — | X-axis label text |
| y_label | — | Y-axis label text |
| source | — | Data source shown in footer |
| highlight | — | Data label to highlight (e.g. "Q4", "Dec", index 3) |
If chart_type or data is missing, ask exactly:
"To create the chart, I need:
- Chart type — bar / line / area / pie / doughnut / scatter / radar / treemap
- Data — provide as JSON array or CSV (e.g.
[12, 18, 22, 25, 31]with labels['Q1','Q2','Q3','Q4','Q5'])Optional: title, style (default: clean-slate), dimensions (default: 1080×1080), highlight a specific data point"
If both present → skip to Step 2.
1. Normalize chart type:
area → line + areaStyle: {} on seriesdoughnut → pie + radius: ['40%', '70%'] on serieshorizontal bar → bar + swap xAxis/yAxis (category axis on y)2. Read references/chart-library.md — load full config spec for this chart type.
3. Read references/style-presets.md — load CSS tokens + data palette for chosen style.
4. Commit to design direction:
| Decision | Derive from |
|---|---|
| Tone | Professional / editorial / bold / technical — match the data's audience |
| Data story | Single insight this chart proves (becomes the title) |
| Highlight strategy | Which data point needs visual emphasis and why? |
| Background | Light (clean-slate, matt-gray) or dark (midnight-editorial, electric-burst, brutalist) |
5. Parse data:
[12, 18, 22] → series.data, labels provided separately[{x: 'Jan', y: 12}] → xAxis.data from x keys, series.data from y valuesseries entries each with type, name, dataseries.data: [[x1,y1], [x2,y2], ...] format6. Parse dimensions: "1080x1080" → W=1080, H=1080. Body = WxH. Output PNG = 2W × 2H.
Read ALL before generating:
references/chart-library.md for this chart type's full ECharts config specreferences/style-presets.md for the chosen style's CSS tokens + paletteRequired HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
[font CDN link from style preset]
<style>
:root {
[all CSS tokens from style preset]
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: [W]px; height: [H]px;
overflow: hidden;
background: var(--bg);
font-family: var(--font-body);
}
body {
display: flex;
flex-direction: column;
padding: 40px 48px 32px; /* pie/doughnut: use 64px 80px */
}
/* ECharts container must have explicit size */
.chart-container {
flex: 1;
min-height: 0;
/* pie/doughnut only: max-height: 860px; */
}
.chart-header { margin-bottom: 24px; }
.chart-title {
font-family: var(--font-display);
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.chart-subtitle {
font-family: var(--font-body);
font-size: clamp(0.75rem, 1.2vw, 0.9rem);
color: var(--text-muted);
margin-top: 6px;
line-height: 1.5;
}
.chart-footer {
margin-top: 14px;
font-family: var(--font-body);
font-size: 10px;
color: var(--text-muted);
opacity: 0.65;
}
</style>
</head>
<body>
[if title or subtitle: <div class="chart-header"><div class="chart-title">...</div>...</div>]
<div id="chart" class="chart-container"></div>
[if source: <div class="chart-footer">Source: [source]</div>]
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
<script>
window.__chartReady = false;
document.fonts.ready.then(() => {
const container = document.getElementById('chart');
const chart = echarts.init(container, null, { renderer: 'canvas' });
// CRITICAL: register events BEFORE setOption — ECharts bug #14101/#17500
// 'finished' may silently not fire if registered after setOption with animation:false
chart.on('finished', () => {
window.__chartReady = true;
});
// Belt-and-suspenders fallback via 'rendered'
chart.on('rendered', () => {
clearTimeout(window.__renderDebounce);
window.__renderDebounce = setTimeout(() => { window.__chartReady = true; }, 100);
});
const palette = [palette from style preset];
const option = {
animation: false, // instant render for screenshot
backgroundColor: 'transparent', // body CSS handles bg color
textStyle: {
fontFamily: '[--font-body value]',
color: '[--text-muted value]',
},
[title config if title param provided],
[legend config per chart type],
[grid config per chart type],
[xAxis config per chart type],
[yAxis config per chart type],
series: [{
[full series config from chart-library.md for this type]
[palette colors applied per chart type]
[if highlight: per-item itemStyle on the highlighted data point]
}]
};
chart.setOption(option); // setOption ALWAYS comes after event registration
});
</script>
</body>
</html>
Design quality rules:
fontWeight: 'bold', fontSize: 20–24 — no thin titlesbarMaxWidth: 60, rounded via itemStyle.borderRadius: [4,4,0,0]smooth: true for natural curves, symbolSize: 8 for pointslabel.formatter: '{b}\n{d}%' for built-in on-slice labelsrgba(255,255,255,0.07), axis line/tick color rgba(255,255,255,0.15)show: false — static PNG, no hover interaction.chart-header, omit title from ECharts optionStructure:
<div>, not <canvas>window.__chartReady = false declared before document.fonts.readychart.on('finished', ...) registered BEFORE chart.setOption()chart.on('rendered', ...) debounce fallback registered BEFORE chart.setOption()animation: false in option objectchart.setOption(option) is the LAST call in the init blockType-specific:
type: 'line' + areaStyle: {} — no type: 'area'type: 'pie' + radius: ['40%', '70%'] — no type: 'doughnut'xAxis.type: 'category' explicitly setxAxis.data (not data.labels)padding: 64px 80px + .chart-container { max-height: 860px }{ value: N, itemStyle: { color } } in data arrayDesign:
references/style-presets.mdtooltip: { show: false } or omitted (no hover on static PNG)rgba(255,255,255,...)source param providedlabel: { show: true } on series)Determine slug from title or chart type + data context (kebab-case, ≤30 chars):
mkdir -p chart/[slug]
Save HTML: chart/[slug]/chart.html
Quick browser check:
open chart/[slug]/chart.html
Run export (replace [skill-root] with actual path to this skill's directory):
bash [skill-root]/scripts/export-chart.sh \
chart/[slug]/chart.html \
chart/[slug]/chart.png \
--width [W] \
--height [H]
The script installs Playwright on first run (~200MB Chromium download), then captures the chart at deviceScaleFactor: 2.
## Chart: [title]
Date: [YYYY-MM-DD] | Type: [chart_type] | Style: [style]
Dimensions: [W×H]px → PNG: [2W×2H]px @2× retina
Files
Source: chart/[slug]/chart.html
Output: chart/[slug]/chart.png
Size: [X] KB
Checklist
- [ ] Title states the insight clearly
- [ ] Data labels legible at display size
- [ ] Highlight visible on correct data point
- [ ] Source attribution present in footer
"Provide structured data — JSON or CSV, not prose descriptions."
"Name the chart type explicitly. 'bar chart comparing Q1–Q4' not 'a chart showing quarters'."
"Specify the data story. 'highlight Q4 which outperformed all others' gives the annotation context."
✅ Good: "Create a line chart. Title: 'From $12k to $95k ARR in 12 Months'. Data: [12, 18, 22, 25, 31, 38, 44, 52, 61, 68, 78, 95] (Jan–Dec 2024). Highlight December. Source: Internal CRM. Style: electric-burst."
❌ Bad: "make a chart about our company growth"