{"id":"b2fb527e-8116-4082-829d-694a086d5759","shortId":"2PAkyM","kind":"skill","title":"graphic-chart","tagline":"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\", ","description":"# graphic-chart\n\nGenerates data visualization charts as PNG. Renders HTML with Apache ECharts v6 in headless Chromium via Playwright → screenshots at 2× retina quality.\n\nCDN: `https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js`\n\n---\n\n## Critical Rules (read before every generation)\n\n1. **`area` type → `type: 'line'` + `areaStyle: {}`** — ECharts has no `type: 'area'`.\n2. **`doughnut` → `type: 'pie'` + `radius: ['40%', '70%']`** — ECharts has no `type: 'doughnut'`.\n3. **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.\n4. **`xAxis.type: 'category'` must be explicit** — ECharts does not infer it from the data. Forgetting this produces a blank chart.\n5. **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`.\n6. **Data labels are fully built-in** — use `label: { show: true }` on any series. No plugin needed.\n7. **Highlight a specific bar/point via per-item `itemStyle`** — put `{ value: N, itemStyle: { color: '#...' } }` directly in the `data` array. Do NOT use Chart.js-style `backgroundColor` arrays.\n8. **ECharts init uses a `<div>` container, not `<canvas>`** — `echarts.init(document.getElementById('chart'))`. The container div needs explicit dimensions.\n9. **`animation: false` in option** — disables animation for instant render. Still register `finished` + `rendered` events before setOption for the readiness signal.\n10. **Never dump HTML in chat.** Save to file, show summary only.\n11. **Title states the insight, not the subject.** \"Revenue grew 3× in 12 months\" not \"Monthly Revenue\".\n12. **Pie/doughnut: use body `padding: 64px 80px` and `.chart-container { max-height: 860px }`** — prevents edge-to-edge fill when no title.\n\n---\n\n## Step 1: Intake\n\n**Required:** `chart_type`, `data`\n\n**Optional parameters and defaults:**\n\n| Parameter | Default | Description |\n|---|---|---|\n| chart_type | — | bar / line / area / pie / doughnut / scatter / radar / treemap |\n| data | — | JSON array or CSV — required |\n| title | — | States the insight, ≤10 words |\n| subtitle | — | 1-sentence context line |\n| style | clean-slate | clean-slate / midnight-editorial / matt-gray / electric-burst / brutalist |\n| dimensions | 1080x1080 | WxH pixels (output PNG = 2× via deviceScaleFactor) |\n| x_label | — | X-axis label text |\n| y_label | — | Y-axis label text |\n| source | — | Data source shown in footer |\n| highlight | — | Data label to highlight (e.g. \"Q4\", \"Dec\", index 3) |\n\n**If `chart_type` or `data` is missing, ask exactly:**\n\n> \"To create the chart, I need:\n> 1. **Chart type** — bar / line / area / pie / doughnut / scatter / radar / treemap\n> 2. **Data** — provide as JSON array or CSV (e.g. `[12, 18, 22, 25, 31]` with labels `['Q1','Q2','Q3','Q4','Q5']`)\n>\n> Optional: title, style (default: clean-slate), dimensions (default: 1080×1080), highlight a specific data point\"\n\nIf both present → skip to Step 2.\n\n---\n\n## Step 2: Internal Architecture (never shown to user)\n\n**1. Normalize chart type:**\n- `area` → `line` + `areaStyle: {}` on series\n- `doughnut` → `pie` + `radius: ['40%', '70%']` on series\n- `horizontal bar` → `bar` + swap xAxis/yAxis (category axis on y)\n- All others: use as-is\n\n**2. Read `references/chart-library.md`** — load full config spec for this chart type.\n\n**3. Read `references/style-presets.md`** — load CSS tokens + data palette for chosen style.\n\n**4. Commit to design direction:**\n\n| Decision | Derive from |\n|---|---|\n| Tone | Professional / editorial / bold / technical — match the data's audience |\n| Data story | Single insight this chart proves (becomes the title) |\n| Highlight strategy | Which data point needs visual emphasis and why? |\n| Background | Light (clean-slate, matt-gray) or dark (midnight-editorial, electric-burst, brutalist) |\n\n**5. Parse data:**\n- Simple array `[12, 18, 22]` → series.data, labels provided separately\n- Object array `[{x: 'Jan', y: 12}]` → xAxis.data from x keys, series.data from y values\n- CSV: parse header row as xAxis.data, value row as series.data\n- Multi-series: multiple `series` entries each with `type`, `name`, `data`\n- Scatter: `series.data: [[x1,y1], [x2,y2], ...]` format\n\n**6. Parse dimensions:** `\"1080x1080\"` → W=1080, H=1080. Body = WxH. Output PNG = 2W × 2H.\n\n---\n\n## Step 3: HTML Generation\n\nRead ALL before generating:\n- `references/chart-library.md` for this chart type's full ECharts config spec\n- `references/style-presets.md` for the chosen style's CSS tokens + palette\n\n**Required HTML structure:**\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n[font CDN link from style preset]\n<style>\n:root {\n  [all CSS tokens from style preset]\n}\n\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body {\n  width: [W]px; height: [H]px;\n  overflow: hidden;\n  background: var(--bg);\n  font-family: var(--font-body);\n}\nbody {\n  display: flex;\n  flex-direction: column;\n  padding: 40px 48px 32px;   /* pie/doughnut: use 64px 80px */\n}\n\n/* ECharts container must have explicit size */\n.chart-container {\n  flex: 1;\n  min-height: 0;\n  /* pie/doughnut only: max-height: 860px; */\n}\n\n.chart-header { margin-bottom: 24px; }\n.chart-title {\n  font-family: var(--font-display);\n  font-size: clamp(1.1rem, 2.5vw, 1.6rem);\n  font-weight: 700;\n  color: var(--text);\n  line-height: 1.2;\n}\n.chart-subtitle {\n  font-family: var(--font-body);\n  font-size: clamp(0.75rem, 1.2vw, 0.9rem);\n  color: var(--text-muted);\n  margin-top: 6px;\n  line-height: 1.5;\n}\n.chart-footer {\n  margin-top: 14px;\n  font-family: var(--font-body);\n  font-size: 10px;\n  color: var(--text-muted);\n  opacity: 0.65;\n}\n</style>\n</head>\n<body>\n\n[if title or subtitle: <div class=\"chart-header\"><div class=\"chart-title\">...</div>...</div>]\n\n<div id=\"chart\" class=\"chart-container\"></div>\n\n[if source: <div class=\"chart-footer\">Source: [source]</div>]\n\n<script src=\"https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js\"></script>\n\n<script>\nwindow.__chartReady = false;\n\ndocument.fonts.ready.then(() => {\n  const container = document.getElementById('chart');\n  const chart = echarts.init(container, null, { renderer: 'canvas' });\n\n  // CRITICAL: register events BEFORE setOption — ECharts bug #14101/#17500\n  // 'finished' may silently not fire if registered after setOption with animation:false\n  chart.on('finished', () => {\n    window.__chartReady = true;\n  });\n  // Belt-and-suspenders fallback via 'rendered'\n  chart.on('rendered', () => {\n    clearTimeout(window.__renderDebounce);\n    window.__renderDebounce = setTimeout(() => { window.__chartReady = true; }, 100);\n  });\n\n  const palette = [palette from style preset];\n\n  const option = {\n    animation: false,                            // instant render for screenshot\n\n    backgroundColor: 'transparent',             // body CSS handles bg color\n\n    textStyle: {\n      fontFamily: '[--font-body value]',\n      color: '[--text-muted value]',\n    },\n\n    [title config if title param provided],\n    [legend config per chart type],\n    [grid config per chart type],\n    [xAxis config per chart type],\n    [yAxis config per chart type],\n\n    series: [{\n      [full series config from chart-library.md for this type]\n      [palette colors applied per chart type]\n      [if highlight: per-item itemStyle on the highlighted data point]\n    }]\n  };\n\n  chart.setOption(option);   // setOption ALWAYS comes after event registration\n});\n</script>\n</body>\n</html>\n```\n\n**Design quality rules:**\n- Title font: `fontWeight: 'bold'`, `fontSize: 20–24` — no thin titles\n- Grid lines: low opacity (0.06–0.10) — subordinate to data\n- Bars: `barMaxWidth: 60`, rounded via `itemStyle.borderRadius: [4,4,0,0]`\n- Lines: `smooth: true` for natural curves, `symbolSize: 8` for points\n- Pie/doughnut: `label.formatter: '{b}\\n{d}%'` for built-in on-slice labels\n- Dark presets: grid `rgba(255,255,255,0.07)`, axis line/tick color `rgba(255,255,255,0.15)`\n- Tooltip: `show: false` — static PNG, no hover interaction\n- When no title provided: skip `.chart-header`, omit title from ECharts option\n\n---\n\n## Step 4: Self-QA (fix every failure before Step 5)\n\n**Structure:**\n- [ ] Container is a `<div>`, not `<canvas>`\n- [ ] `window.__chartReady = false` declared before `document.fonts.ready`\n- [ ] `chart.on('finished', ...)` registered BEFORE `chart.setOption()`\n- [ ] `chart.on('rendered', ...)` debounce fallback registered BEFORE `chart.setOption()`\n- [ ] `animation: false` in option object\n- [ ] `chart.setOption(option)` is the LAST call in the init block\n\n**Type-specific:**\n- [ ] Area: `type: 'line'` + `areaStyle: {}` — no `type: 'area'`\n- [ ] Doughnut: `type: 'pie'` + `radius: ['40%', '70%']` — no `type: 'doughnut'`\n- [ ] Bar: `xAxis.type: 'category'` explicitly set\n- [ ] Category data in `xAxis.data` (not `data.labels`)\n- [ ] Pie/doughnut: body `padding: 64px 80px` + `.chart-container { max-height: 860px }`\n- [ ] Highlight: per-item `{ value: N, itemStyle: { color } }` in data array\n\n**Design:**\n- [ ] All palette colors from `references/style-presets.md`\n- [ ] Title states insight (not just subject)\n- [ ] `tooltip: { show: false }` or omitted (no hover on static PNG)\n- [ ] Dark preset: grid/axis colors use `rgba(255,255,255,...)`\n- [ ] Source in footer if `source` param provided\n- [ ] Data labels visible (built-in `label: { show: true }` on series)\n\n---\n\n## Step 5: Export\n\nDetermine slug from title or chart type + data context (kebab-case, ≤30 chars):\n```bash\nmkdir -p chart/[slug]\n```\n\nSave HTML: `chart/[slug]/chart.html`\n\nQuick browser check:\n```bash\nopen chart/[slug]/chart.html\n```\n\nRun export (replace `[skill-root]` with actual path to this skill's directory):\n```bash\nbash [skill-root]/scripts/export-chart.sh \\\n  chart/[slug]/chart.html \\\n  chart/[slug]/chart.png \\\n  --width [W] \\\n  --height [H]\n```\n\nThe script installs Playwright on first run (~200MB Chromium download), then captures the chart at `deviceScaleFactor: 2`.\n\n---\n\n## Step 6: Output Summary\n\n```\n## Chart: [title]\nDate: [YYYY-MM-DD] | Type: [chart_type] | Style: [style]\nDimensions: [W×H]px → PNG: [2W×2H]px @2× retina\n\nFiles\n  Source:   chart/[slug]/chart.html\n  Output:   chart/[slug]/chart.png\n  Size:     [X] KB\n\nChecklist\n- [ ] Title states the insight clearly\n- [ ] Data labels legible at display size\n- [ ] Highlight visible on correct data point\n- [ ] Source attribution present in footer\n```\n\n---\n\n## Prompt Tips (show when user asks for guidance)\n\n> \"Provide structured data — JSON or CSV, not prose descriptions.\"\n>\n> \"Name the chart type explicitly. 'bar chart comparing Q1–Q4' not 'a chart showing quarters'.\"\n>\n> \"Specify the data story. 'highlight Q4 which outperformed all others' gives the annotation context.\"\n>\n> ✅ 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.\"\n>\n> ❌ Bad: \"make a chart about our company growth\"","tags":["graphic","chart","opendirectory","varnan-tech","agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"capabilities":["skill","source-varnan-tech","skill-graphic-chart","topic-agent-skills","topic-gtm","topic-hermes-agent","topic-marketing-skills","topic-openclaw-skills","topic-skill-pack","topic-skills","topic-technical-seo"],"categories":["opendirectory"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Varnan-Tech/opendirectory/graphic-chart","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Varnan-Tech/opendirectory","source_repo":"https://github.com/Varnan-Tech/opendirectory","install_from":"skills.sh"}},"qualityScore":"0.593","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 286 github stars · SKILL.md body (11,193 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:54:41.185Z","embedding":null,"createdAt":"2026-05-03T12:54:44.483Z","updatedAt":"2026-05-18T18:54:41.185Z","lastSeenAt":"2026-05-18T18:54:41.185Z","tsv":"'/chart.html':981,989,1012,1067 '/chart.png':1015,1071 '/npm/echarts@6.0.0/dist/echarts.min.js':73 '/scripts/export-chart.sh':1009 '0':743,744 '0.06':730 '0.07':775 '0.10':731 '0.15':783 '1':80,318,354,429,492 '10':264,351 '1080':22,470,471,659,661 '1080px':23 '1080x1080':376,657 '11':276 '12':288,293,449,605,617,1156,1159 '12k':1151 '14101':114 '17500':115 '18':450,606,1160 '2':67,91,381,440,483,485,523,1036,1061 '20':721 '200mb':1027 '2024':1173 '22':451,607,1161 '24':722 '25':452,1162 '255':772,773,774,780,781,782,934,935,936 '2h':667,1059 '2w':666,1058 '3':103,286,413,534,669 '30':970 '31':453,1163 '38':1164 '4':135,545,741,742,806 '40':96,504,867 '44':1165 '5':25,155,600,815,956 '52':1166 '6':182,654,1038 '60':737 '61':1167 '64px':298,886 '68':1168 '7':200 '70':97,505,868 '78':1169 '8':227,752 '80px':299,887 '860px':307,894 '9':243 '95':1170 '95k':1153 'actual':997 'alway':126 'anim':244,249,838 'annot':29,1142 'apach':19,57 'architectur':487 'area':10,81,90,335,434,496,856,862 'areastyl':85,498,859 'arr':1154 'array':165,219,226,343,445,604,613,905 'as-i':520 'ask':421,1103 'attribut':1094 'audienc':562 'axi':388,395,514,776 'b':757 'background':583 'backgroundcolor':225 'bad':1183 'bar':8,41,333,432,509,510,735,872,1120 'bar/point':204 'barmaxwidth':736 'bash':972,985,1004,1005 'becom':570 'blank':153 'block':852 'bodi':296,662,884 'bold':556,719 'browser':983 'brutalist':374,599 'bug':113 'built':188,762,948 'built-in':187,761,947 'burst':373,598,1182 'call':848 'captur':1031 'case':969 'categori':137,156,513,874,877 'cdn':70,700 'cdn.jsdelivr.net':72 'cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js':71 'char':971 'chart':3,7,36,42,47,51,154,236,302,321,331,415,426,430,494,532,568,679,798,889,963,975,979,987,1010,1013,1033,1041,1049,1065,1069,1117,1121,1127,1148,1186 'chart-contain':301,888 'chart-head':797 'chart.js':223 'chart.on':107,826,831 'chart.setoption':111,830,837,843 'chat':269 'check':984 'checklist':1075 'chosen':543,689 'chromium':62,1028 'clean':360,363,466,586 'clean-slat':359,362,465,585 'clear':1080 'color':214,778,902,909,931 'commit':546 'compani':1189 'compar':1122 'config':528,684 'contain':232,238,303,817,890 'context':356,966,1143 'correct':1090 'creat':34,424,1145 'critic':74 'crm':1178 'css':538,692 'csv':345,447,626,1111 'curv':750 'd':759 'dark':592,768,928 'data':5,38,49,148,179,183,218,323,341,399,405,418,441,475,540,560,563,576,602,646,734,878,904,944,965,1081,1091,1108,1132,1158 'data.labels':164,882 'date':1043 'dd':1047 'debounc':833 'dec':411,1172 'decemb':1175 'decis':550 'declar':823 'default':24,327,329,464,469 'deriv':551 'descript':330,1114 'design':548,713,906 'determin':958 'devicescalefactor':383,1035 'dimens':242,375,468,656,1053 'direct':215,549 'directori':1003 'disabl':248 'display':1085 'div':239 'document.fonts.ready':825 'document.getelementbyid':235 'doughnut':12,92,102,337,436,501,863,871 'download':1029 'dump':266 'e.g':409,448 'echart':20,58,86,98,112,141,166,228,683,803 'echarts.init':234 'edg':310,312 'edge-to-edg':309 'editori':367,555,595 'electr':372,597,1181 'electric-burst':371,596,1180 'emphasi':580 'entri':641 'event':132,257 'everi':78,811 'exact':422 'explicit':140,241,875,1119 'export':957,991 'failur':812 'fallback':834 'fals':245,786,822,839,920 'file':272,1063 'fill':313 'finish':108,129,255,827 'fire':125 'first':1025 'fix':810 'flat':169 'fn':109 'font':699,717 'fontsiz':720 'fontweight':718 'footer':403,939,1097 'forget':149 'format':653 'full':527,682 'fulli':186 'generat':4,48,79,671,675 'give':1140 'go':158 'good':1144 'graph':44 'graphic':2,46 'graphic-chart':1,45 'gray':370,590 'grew':285 'grid':173,726,770 'grid/axis':930 'growth':1190 'guidanc':1105 'h':660,1019,1055 'header':628,799 'headless':61 'height':306,893,1018 'highlight':28,201,404,408,472,573,895,1087,1134,1174 'horizont':508 'hover':790,924 'html':55,267,670,696,698,978 'index':412 'infer':144 'init':229,851 'insight':280,350,566,914,1079 'instal':1022 'instant':251 'intak':319 'interact':791 'intern':486,1177 'item':208,898 'itemstyl':209,213,901 'itemstyle.borderradius':740 'jan':615,1171 'json':342,444,1109 'kb':1074 'kebab':968 'kebab-cas':967 'key':621 'label':157,184,191,385,389,392,396,406,455,609,767,945,950,1082 'label.formatter':756 'last':847 'legend':175 'legibl':1083 'light':584 'line':9,43,84,334,357,433,497,727,745,858,1147 'line/tick':777 'link':701 'listen':117 'load':526,537 'low':728 'make':39,1184 'match':558 'matt':369,589 'matt-gray':368,588 'max':305,892 'max-height':304,891 'midnight':366,594 'midnight-editori':365,593 'miss':420 'mkdir':973 'mm':1046 'month':289,291,1157 'multi':637 'multi-seri':636 'multipl':639 'must':138 'n':212,758,900 'name':645,1115 'natur':749 'need':199,240,428,578 'nest':177 'never':124,265,488 'normal':493 'object':612,842 'omit':800,922 'on-slic':764 'opac':729 'open':986 'option':181,247,324,461,804,841,844 'other':518,1139 'outperform':1137 'output':379,664,1039,1068 'p':974 'pad':297,885 'palett':541,694,908 'param':942 'paramet':325,328 'pars':601,627,655 'path':998 'per':207,897 'per-item':206,896 'pie':11,94,336,435,502,865 'pie/doughnut':294,755,883 'pixel':378 'playwright':64,1023 'plugin':198 'png':17,53,380,665,788,927,1057 'point':476,577,754,1092 'present':479,1095 'preset':27,704,769,929 'prevent':308 'produc':151 'profession':554 'prompt':1098 'prose':1113 'prove':569 'provid':442,610,795,943,1106 'put':210 'px':1056,1060 'q1':456,1123 'q2':457 'q3':458 'q4':410,459,1124,1135 'q5':460 'qa':809 'qualiti':69,714 'quarter':1129 'quick':982 'radar':14,339,438 'radius':95,503,866 'read':76,524,535,672 'readi':104,262 'references/chart-library.md':525,676 'references/style-presets.md':536,686,911 'regist':106,119,127,254,828,835 'render':54,131,252,256,832 'replac':992 'requir':320,346,695 'retina':68,1062 'revenu':284,292 'rgba':771,779,933 'root':995,1008 'round':738 'row':629,633 'rule':75,715 'run':990,1026 'save':270,977 'say':33 'scatter':13,338,437,647 'screenshot':65 'script':1021 'self':808 'self-qa':807 'sentenc':355 'separ':611 'seri':172,196,500,507,638,640,954 'series.data':608,622,635,648 'set':876 'setopt':121,134,259 'show':192,273,785,919,951,1100,1128 'shown':401,489 'signal':105,263 'silent':123 'simpl':603 'singl':565 'size':1072,1086 'skill':994,1001,1007 'skill-graphic-chart' 'skill-root':993,1006 'skip':480,796 'slate':361,364,467,587 'slice':766 'slug':959,976,980,988,1011,1014,1066,1070 'smooth':746 'sourc':398,400,710,711,712,937,941,1064,1093,1176 'source-varnan-tech' 'spec':529,685 'specif':203,474,855 'specifi':1130 'state':278,348,913,1077 'static':787,926 'step':317,482,484,668,805,814,955,1037 'still':253 'stori':564,1133 'strategi':574 'structur':167,697,816,1107 'style':26,224,358,463,544,690,703,1051,1052,1179 'subject':283,917 'subordin':732 'subtitl':353,708 'summari':274,1040 'swap':511 'symbols':751 'technic':557 'text':390,397 'thin':724 'tip':1099 'titl':174,277,316,347,462,572,706,716,725,794,801,912,961,1042,1076,1149 'token':539,693 'tone':553 'tooltip':784,918 'topic-agent-skills' 'topic-gtm' 'topic-hermes-agent' 'topic-marketing-skills' 'topic-openclaw-skills' 'topic-skill-pack' 'topic-skills' 'topic-technical-seo' 'treemap':15,340,439 'trigger':30 'true':193,747,952 'type':82,83,89,93,101,322,332,416,431,495,533,644,680,854,857,861,864,870,964,1048,1050,1118 'type-specif':853 'use':18,190,222,230,295,519,932 'user':32,491,1102 'v6':21,59 'valu':211,625,632,899 'via':63,205,382,739 'visibl':946,1088 'visual':6,37,50,579 'w':658,1017,1054 'width':1016 'window.__chartready':821 'word':352 'wxh':377,663 'x':384,387,614,620,1073 'x-axi':386 'x1':649 'x2':651 'xaxi':170 'xaxis.data':160,618,631,880 'xaxis.type':136,873 'xaxis/yaxis':512 'y':391,394,516,616,624 'y-axi':393 'y1':650 'y2':652 'yaxi':171 'yyyi':1045 'yyyy-mm-dd':1044","prices":[{"id":"e3854072-7d06-4433-8dc2-2cf8b4390561","listingId":"b2fb527e-8116-4082-829d-694a086d5759","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Varnan-Tech","category":"opendirectory","install_from":"skills.sh"},"createdAt":"2026-05-03T12:54:44.483Z"}],"sources":[{"listingId":"b2fb527e-8116-4082-829d-694a086d5759","source":"github","sourceId":"Varnan-Tech/opendirectory/graphic-chart","sourceUrl":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/graphic-chart","isPrimary":false,"firstSeenAt":"2026-05-03T12:54:44.483Z","lastSeenAt":"2026-05-18T18:54:41.185Z"}],"details":{"listingId":"b2fb527e-8116-4082-829d-694a086d5759","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Varnan-Tech","slug":"graphic-chart","github":{"repo":"Varnan-Tech/opendirectory","stars":286,"topics":["agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"license":"mit","html_url":"https://github.com/Varnan-Tech/opendirectory","pushed_at":"2026-05-18T18:27:10Z","description":" AI Agent Skills built for Founders who hate Marketing","skill_md_sha":"ee55c8806f6d8720ec649532ffe4f1ba0efe9f19","skill_md_path":"skills/graphic-chart/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/graphic-chart"},"layout":"multi","source":"github","category":"opendirectory","frontmatter":{"name":"graphic-chart","description":"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\".","compatibility":"[claude-code, gemini-cli, github-copilot]"},"skills_sh_url":"https://skills.sh/Varnan-Tech/opendirectory/graphic-chart"},"updatedAt":"2026-05-18T18:54:41.185Z"}}