{
  "schemaVersion": "1.0",
  "item": {
    "slug": "chart-image",
    "name": "Chart Image",
    "source": "tencent",
    "type": "skill",
    "category": "数据分析",
    "sourceUrl": "https://clawhub.ai/dannyshmueli/chart-image",
    "canonicalUrl": "https://clawhub.ai/dannyshmueli/chart-image",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/chart-image",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=chart-image",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "CAPABILITY.md",
      "README.md",
      "SKILL.md",
      "scripts/chart.mjs",
      "scripts/package-lock.json",
      "scripts/package.json"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/chart-image"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/chart-image",
    "agentPageUrl": "https://openagent3.xyz/skills/chart-image/agent",
    "manifestUrl": "https://openagent3.xyz/skills/chart-image/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/chart-image/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Chart Image Generator",
        "body": "Generate PNG chart images from data using Vega-Lite. Perfect for headless server environments."
      },
      {
        "title": "Why This Skill?",
        "body": "Built for Fly.io / VPS / Docker deployments:\n\n✅ No native compilation - Uses Sharp with prebuilt binaries (unlike canvas which requires build tools)\n✅ No Puppeteer/browser - Pure Node.js, no Chrome download, no headless browser overhead\n✅ Lightweight - ~15MB total dependencies vs 400MB+ for Puppeteer-based solutions\n✅ Fast cold starts - No browser spinup delay, generates charts in <500ms\n✅ Works offline - No external API calls (unlike QuickChart.io)"
      },
      {
        "title": "Setup (one-time)",
        "body": "cd /data/clawd/skills/chart-image/scripts && npm install"
      },
      {
        "title": "Quick Usage",
        "body": "node /data/clawd/skills/chart-image/scripts/chart.mjs \\\n  --type line \\\n  --data '[{\"x\":\"10:00\",\"y\":25},{\"x\":\"10:30\",\"y\":27},{\"x\":\"11:00\",\"y\":31}]' \\\n  --title \"Price Over Time\" \\\n  --output chart.png"
      },
      {
        "title": "Line Chart (default)",
        "body": "node chart.mjs --type line --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output line.png"
      },
      {
        "title": "Bar Chart",
        "body": "node chart.mjs --type bar --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output bar.png"
      },
      {
        "title": "Area Chart",
        "body": "node chart.mjs --type area --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output area.png"
      },
      {
        "title": "Pie / Donut Chart",
        "body": "# Pie\nnode chart.mjs --type pie --data '[{\"category\":\"A\",\"value\":30},{\"category\":\"B\",\"value\":70}]' \\\n  --category-field category --y-field value --output pie.png\n\n# Donut (with hole)\nnode chart.mjs --type donut --data '[{\"category\":\"A\",\"value\":30},{\"category\":\"B\",\"value\":70}]' \\\n  --category-field category --y-field value --output donut.png"
      },
      {
        "title": "Candlestick Chart (OHLC)",
        "body": "node chart.mjs --type candlestick \\\n  --data '[{\"x\":\"Mon\",\"open\":100,\"high\":110,\"low\":95,\"close\":105}]' \\\n  --open-field open --high-field high --low-field low --close-field close \\\n  --title \"Stock Price\" --output candle.png"
      },
      {
        "title": "Heatmap",
        "body": "node chart.mjs --type heatmap \\\n  --data '[{\"x\":\"Mon\",\"y\":\"Week1\",\"value\":5},{\"x\":\"Tue\",\"y\":\"Week1\",\"value\":8}]' \\\n  --color-value-field value --color-scheme viridis \\\n  --title \"Activity Heatmap\" --output heatmap.png"
      },
      {
        "title": "Multi-Series Line Chart",
        "body": "Compare multiple trends on one chart:\n\nnode chart.mjs --type line --series-field \"market\" \\\n  --data '[{\"x\":\"Jan\",\"y\":10,\"market\":\"A\"},{\"x\":\"Jan\",\"y\":15,\"market\":\"B\"}]' \\\n  --title \"Comparison\" --output multi.png"
      },
      {
        "title": "Stacked Bar Chart",
        "body": "node chart.mjs --type bar --stacked --color-field \"category\" \\\n  --data '[{\"x\":\"Mon\",\"y\":10,\"category\":\"Work\"},{\"x\":\"Mon\",\"y\":5,\"category\":\"Personal\"}]' \\\n  --title \"Hours by Category\" --output stacked.png"
      },
      {
        "title": "Volume Overlay (Dual Y-axis)",
        "body": "Price line with volume bars:\n\nnode chart.mjs --type line --volume-field volume \\\n  --data '[{\"x\":\"10:00\",\"y\":100,\"volume\":5000},{\"x\":\"11:00\",\"y\":105,\"volume\":3000}]' \\\n  --title \"Price + Volume\" --output volume.png"
      },
      {
        "title": "Sparkline (mini inline chart)",
        "body": "node chart.mjs --sparkline --data '[{\"x\":\"1\",\"y\":10},{\"x\":\"2\",\"y\":15}]' --output spark.png\n\nSparklines are 80x20 by default, transparent, no axes."
      },
      {
        "title": "Basic Options",
        "body": "OptionDescriptionDefault--typeChart type: line, bar, area, point, pie, donut, candlestick, heatmapline--dataJSON array of data points---outputOutput file pathchart.png--titleChart title---widthWidth in pixels600--heightHeight in pixels300"
      },
      {
        "title": "Axis Options",
        "body": "OptionDescriptionDefault--x-fieldField name for X axisx--y-fieldField name for Y axisy--x-titleX axis labelfield name--y-titleY axis labelfield name--x-typeX axis type: ordinal, temporal, quantitativeordinal--y-domainY scale as \"min,max\"auto"
      },
      {
        "title": "Visual Options",
        "body": "OptionDescriptionDefault--colorLine/bar color#e63946--darkDark mode themefalse--svgOutput SVG instead of PNGfalse--color-schemeVega color scheme (category10, viridis, etc.)-"
      },
      {
        "title": "Alert/Monitor Options",
        "body": "OptionDescriptionDefault--show-changeShow +/-% change annotation at last pointfalse--focus-changeZoom Y-axis to 2x data rangefalse--focus-recent NShow only last N data pointsall--show-valuesLabel min/max peak pointsfalse"
      },
      {
        "title": "Multi-Series/Stacked Options",
        "body": "OptionDescriptionDefault--series-fieldField for multi-series line charts---stackedEnable stacked bar modefalse--color-fieldField for stack/color categories-"
      },
      {
        "title": "Candlestick Options",
        "body": "OptionDescriptionDefault--open-fieldOHLC open fieldopen--high-fieldOHLC high fieldhigh--low-fieldOHLC low fieldlow--close-fieldOHLC close fieldclose"
      },
      {
        "title": "Pie/Donut Options",
        "body": "OptionDescriptionDefault--category-fieldField for pie slice categoriesx--donutRender as donut (with center hole)false"
      },
      {
        "title": "Heatmap Options",
        "body": "OptionDescriptionDefault--color-value-fieldField for heatmap intensityvalue--y-category-fieldY axis category fieldy"
      },
      {
        "title": "Dual-Axis Options (General)",
        "body": "OptionDescriptionDefault--y2-fieldSecond Y axis field (independent right axis)---y2-titleTitle for second Y axisfield name--y2-colorColor for second series#60a5fa (dark) / #2563eb (light)--y2-typeChart type for second axis: line, bar, arealine\n\nExample: Revenue bars (left) + Churn area (right):\n\nnode chart.mjs \\\n  --data '[{\"month\":\"Jan\",\"revenue\":12000,\"churn\":4.2},...]' \\\n  --x-field month --y-field revenue --type bar \\\n  --y2-field churn --y2-type area --y2-color \"#60a5fa\" \\\n  --y-title \"Revenue ($)\" --y2-title \"Churn (%)\" \\\n  --x-sort none --dark --title \"Revenue vs Churn\""
      },
      {
        "title": "Volume Overlay Options (Candlestick)",
        "body": "OptionDescriptionDefault--volume-fieldField for volume bars (enables dual-axis)---volume-colorColor for volume bars#4a5568"
      },
      {
        "title": "Formatting Options",
        "body": "OptionDescriptionDefault--y-formatY axis format: percent, dollar, compact, decimal4, integer, scientific, or d3-format stringauto--subtitleSubtitle text below chart title---hlineHorizontal reference line: \"value\" or \"value,color\" or \"value,color,label\" (repeatable)-"
      },
      {
        "title": "Annotation Options",
        "body": "OptionDescriptionDefault--annotationStatic text annotation---annotationsJSON array of event markers-"
      },
      {
        "title": "Alert-Style Chart (recommended for monitors)",
        "body": "node chart.mjs --type line --data '[...]' \\\n  --title \"Iran Strike Odds (48h)\" \\\n  --show-change --focus-change --show-values --dark \\\n  --output alert.png\n\nFor recent action only:\n\nnode chart.mjs --type line --data '[hourly data...]' \\\n  --focus-recent 4 --show-change --focus-change --dark \\\n  --output recent.png"
      },
      {
        "title": "Timeline Annotations",
        "body": "Mark events on the chart:\n\nnode chart.mjs --type line --data '[...]' \\\n  --annotations '[{\"x\":\"14:00\",\"label\":\"News broke\"},{\"x\":\"16:30\",\"label\":\"Press conf\"}]' \\\n  --output annotated.png"
      },
      {
        "title": "Temporal X-Axis",
        "body": "For proper time series with date gaps:\n\nnode chart.mjs --type line --x-type temporal \\\n  --data '[{\"x\":\"2026-01-01\",\"y\":10},{\"x\":\"2026-01-15\",\"y\":20}]' \\\n  --output temporal.png\n\nUse --x-type temporal when X values are ISO dates and you want spacing to reflect actual time gaps (not evenly spaced)."
      },
      {
        "title": "Y-Axis Formatting",
        "body": "Format axis values for readability:\n\n# Dollar amounts\nnode chart.mjs --data '[...]' --y-format dollar --output revenue.png\n# → $1,234.56\n\n# Percentages (values as decimals 0-1)\nnode chart.mjs --data '[...]' --y-format percent --output rates.png\n# → 45.2%\n\n# Compact large numbers\nnode chart.mjs --data '[...]' --y-format compact --output users.png\n# → 1.2K, 3.4M\n\n# Crypto prices (4 decimal places)\nnode chart.mjs --data '[...]' --y-format decimal4 --output molt.png\n# → 0.0004\n\n# Custom d3-format string\nnode chart.mjs --data '[...]' --y-format ',.3f' --output custom.png\n\nAvailable shortcuts: percent, dollar/usd, compact, integer, decimal2, decimal4, scientific"
      },
      {
        "title": "Chart Subtitle",
        "body": "Add context below the title:\n\nnode chart.mjs --title \"MOLT Price\" --subtitle \"20,668 MOLT held\" --data '[...]' --output molt.png"
      },
      {
        "title": "Theme Selection",
        "body": "Use --dark for dark mode. Auto-select based on time:\n\nNight (20:00-07:00 local): --dark\nDay (07:00-20:00 local): light mode (default)"
      },
      {
        "title": "Piping Data",
        "body": "echo '[{\"x\":\"A\",\"y\":1},{\"x\":\"B\",\"y\":2}]' | node chart.mjs --output out.png"
      },
      {
        "title": "Custom Vega-Lite Spec",
        "body": "For advanced charts:\n\nnode chart.mjs --spec my-spec.json --output custom.png"
      },
      {
        "title": "⚠️ IMPORTANT: Always Send the Image!",
        "body": "After generating a chart, always send it back to the user's channel.\nDon't just save to a file and describe it — the whole point is the visual.\n\n# 1. Generate the chart\nnode chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png\n\n# 2. Send it! Use message tool with filePath:\n#    action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png\n\nTips:\n\nSave to /data/clawd/tmp/ (persistent) not /tmp/ (may get cleaned)\nUse action=send with filePath — thread-reply does NOT support file attachments\nInclude a brief caption in the message text\nAuto-use --dark between 20:00-07:00 Israel time\n\nUpdated: 2026-02-04 - Added --y-format (percent/dollar/compact/decimal4) and --subtitle"
      }
    ],
    "body": "Chart Image Generator\n\nGenerate PNG chart images from data using Vega-Lite. Perfect for headless server environments.\n\nWhy This Skill?\n\nBuilt for Fly.io / VPS / Docker deployments:\n\n✅ No native compilation - Uses Sharp with prebuilt binaries (unlike canvas which requires build tools)\n✅ No Puppeteer/browser - Pure Node.js, no Chrome download, no headless browser overhead\n✅ Lightweight - ~15MB total dependencies vs 400MB+ for Puppeteer-based solutions\n✅ Fast cold starts - No browser spinup delay, generates charts in <500ms\n✅ Works offline - No external API calls (unlike QuickChart.io)\nSetup (one-time)\ncd /data/clawd/skills/chart-image/scripts && npm install\n\nQuick Usage\nnode /data/clawd/skills/chart-image/scripts/chart.mjs \\\n  --type line \\\n  --data '[{\"x\":\"10:00\",\"y\":25},{\"x\":\"10:30\",\"y\":27},{\"x\":\"11:00\",\"y\":31}]' \\\n  --title \"Price Over Time\" \\\n  --output chart.png\n\nChart Types\nLine Chart (default)\nnode chart.mjs --type line --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output line.png\n\nBar Chart\nnode chart.mjs --type bar --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output bar.png\n\nArea Chart\nnode chart.mjs --type area --data '[{\"x\":\"A\",\"y\":10},{\"x\":\"B\",\"y\":15}]' --output area.png\n\nPie / Donut Chart\n# Pie\nnode chart.mjs --type pie --data '[{\"category\":\"A\",\"value\":30},{\"category\":\"B\",\"value\":70}]' \\\n  --category-field category --y-field value --output pie.png\n\n# Donut (with hole)\nnode chart.mjs --type donut --data '[{\"category\":\"A\",\"value\":30},{\"category\":\"B\",\"value\":70}]' \\\n  --category-field category --y-field value --output donut.png\n\nCandlestick Chart (OHLC)\nnode chart.mjs --type candlestick \\\n  --data '[{\"x\":\"Mon\",\"open\":100,\"high\":110,\"low\":95,\"close\":105}]' \\\n  --open-field open --high-field high --low-field low --close-field close \\\n  --title \"Stock Price\" --output candle.png\n\nHeatmap\nnode chart.mjs --type heatmap \\\n  --data '[{\"x\":\"Mon\",\"y\":\"Week1\",\"value\":5},{\"x\":\"Tue\",\"y\":\"Week1\",\"value\":8}]' \\\n  --color-value-field value --color-scheme viridis \\\n  --title \"Activity Heatmap\" --output heatmap.png\n\nMulti-Series Line Chart\n\nCompare multiple trends on one chart:\n\nnode chart.mjs --type line --series-field \"market\" \\\n  --data '[{\"x\":\"Jan\",\"y\":10,\"market\":\"A\"},{\"x\":\"Jan\",\"y\":15,\"market\":\"B\"}]' \\\n  --title \"Comparison\" --output multi.png\n\nStacked Bar Chart\nnode chart.mjs --type bar --stacked --color-field \"category\" \\\n  --data '[{\"x\":\"Mon\",\"y\":10,\"category\":\"Work\"},{\"x\":\"Mon\",\"y\":5,\"category\":\"Personal\"}]' \\\n  --title \"Hours by Category\" --output stacked.png\n\nVolume Overlay (Dual Y-axis)\n\nPrice line with volume bars:\n\nnode chart.mjs --type line --volume-field volume \\\n  --data '[{\"x\":\"10:00\",\"y\":100,\"volume\":5000},{\"x\":\"11:00\",\"y\":105,\"volume\":3000}]' \\\n  --title \"Price + Volume\" --output volume.png\n\nSparkline (mini inline chart)\nnode chart.mjs --sparkline --data '[{\"x\":\"1\",\"y\":10},{\"x\":\"2\",\"y\":15}]' --output spark.png\n\n\nSparklines are 80x20 by default, transparent, no axes.\n\nOptions Reference\nBasic Options\nOption\tDescription\tDefault\n--type\tChart type: line, bar, area, point, pie, donut, candlestick, heatmap\tline\n--data\tJSON array of data points\t-\n--output\tOutput file path\tchart.png\n--title\tChart title\t-\n--width\tWidth in pixels\t600\n--height\tHeight in pixels\t300\nAxis Options\nOption\tDescription\tDefault\n--x-field\tField name for X axis\tx\n--y-field\tField name for Y axis\ty\n--x-title\tX axis label\tfield name\n--y-title\tY axis label\tfield name\n--x-type\tX axis type: ordinal, temporal, quantitative\tordinal\n--y-domain\tY scale as \"min,max\"\tauto\nVisual Options\nOption\tDescription\tDefault\n--color\tLine/bar color\t#e63946\n--dark\tDark mode theme\tfalse\n--svg\tOutput SVG instead of PNG\tfalse\n--color-scheme\tVega color scheme (category10, viridis, etc.)\t-\nAlert/Monitor Options\nOption\tDescription\tDefault\n--show-change\tShow +/-% change annotation at last point\tfalse\n--focus-change\tZoom Y-axis to 2x data range\tfalse\n--focus-recent N\tShow only last N data points\tall\n--show-values\tLabel min/max peak points\tfalse\nMulti-Series/Stacked Options\nOption\tDescription\tDefault\n--series-field\tField for multi-series line charts\t-\n--stacked\tEnable stacked bar mode\tfalse\n--color-field\tField for stack/color categories\t-\nCandlestick Options\nOption\tDescription\tDefault\n--open-field\tOHLC open field\topen\n--high-field\tOHLC high field\thigh\n--low-field\tOHLC low field\tlow\n--close-field\tOHLC close field\tclose\nPie/Donut Options\nOption\tDescription\tDefault\n--category-field\tField for pie slice categories\tx\n--donut\tRender as donut (with center hole)\tfalse\nHeatmap Options\nOption\tDescription\tDefault\n--color-value-field\tField for heatmap intensity\tvalue\n--y-category-field\tY axis category field\ty\nDual-Axis Options (General)\nOption\tDescription\tDefault\n--y2-field\tSecond Y axis field (independent right axis)\t-\n--y2-title\tTitle for second Y axis\tfield name\n--y2-color\tColor for second series\t#60a5fa (dark) / #2563eb (light)\n--y2-type\tChart type for second axis: line, bar, area\tline\n\nExample: Revenue bars (left) + Churn area (right):\n\nnode chart.mjs \\\n  --data '[{\"month\":\"Jan\",\"revenue\":12000,\"churn\":4.2},...]' \\\n  --x-field month --y-field revenue --type bar \\\n  --y2-field churn --y2-type area --y2-color \"#60a5fa\" \\\n  --y-title \"Revenue ($)\" --y2-title \"Churn (%)\" \\\n  --x-sort none --dark --title \"Revenue vs Churn\"\n\nVolume Overlay Options (Candlestick)\nOption\tDescription\tDefault\n--volume-field\tField for volume bars (enables dual-axis)\t-\n--volume-color\tColor for volume bars\t#4a5568\nFormatting Options\nOption\tDescription\tDefault\n--y-format\tY axis format: percent, dollar, compact, decimal4, integer, scientific, or d3-format string\tauto\n--subtitle\tSubtitle text below chart title\t-\n--hline\tHorizontal reference line: \"value\" or \"value,color\" or \"value,color,label\" (repeatable)\t-\nAnnotation Options\nOption\tDescription\tDefault\n--annotation\tStatic text annotation\t-\n--annotations\tJSON array of event markers\t-\nAlert-Style Chart (recommended for monitors)\nnode chart.mjs --type line --data '[...]' \\\n  --title \"Iran Strike Odds (48h)\" \\\n  --show-change --focus-change --show-values --dark \\\n  --output alert.png\n\n\nFor recent action only:\n\nnode chart.mjs --type line --data '[hourly data...]' \\\n  --focus-recent 4 --show-change --focus-change --dark \\\n  --output recent.png\n\nTimeline Annotations\n\nMark events on the chart:\n\nnode chart.mjs --type line --data '[...]' \\\n  --annotations '[{\"x\":\"14:00\",\"label\":\"News broke\"},{\"x\":\"16:30\",\"label\":\"Press conf\"}]' \\\n  --output annotated.png\n\nTemporal X-Axis\n\nFor proper time series with date gaps:\n\nnode chart.mjs --type line --x-type temporal \\\n  --data '[{\"x\":\"2026-01-01\",\"y\":10},{\"x\":\"2026-01-15\",\"y\":20}]' \\\n  --output temporal.png\n\n\nUse --x-type temporal when X values are ISO dates and you want spacing to reflect actual time gaps (not evenly spaced).\n\nY-Axis Formatting\n\nFormat axis values for readability:\n\n# Dollar amounts\nnode chart.mjs --data '[...]' --y-format dollar --output revenue.png\n# → $1,234.56\n\n# Percentages (values as decimals 0-1)\nnode chart.mjs --data '[...]' --y-format percent --output rates.png\n# → 45.2%\n\n# Compact large numbers\nnode chart.mjs --data '[...]' --y-format compact --output users.png\n# → 1.2K, 3.4M\n\n# Crypto prices (4 decimal places)\nnode chart.mjs --data '[...]' --y-format decimal4 --output molt.png\n# → 0.0004\n\n# Custom d3-format string\nnode chart.mjs --data '[...]' --y-format ',.3f' --output custom.png\n\n\nAvailable shortcuts: percent, dollar/usd, compact, integer, decimal2, decimal4, scientific\n\nChart Subtitle\n\nAdd context below the title:\n\nnode chart.mjs --title \"MOLT Price\" --subtitle \"20,668 MOLT held\" --data '[...]' --output molt.png\n\nTheme Selection\n\nUse --dark for dark mode. Auto-select based on time:\n\nNight (20:00-07:00 local): --dark\nDay (07:00-20:00 local): light mode (default)\nPiping Data\necho '[{\"x\":\"A\",\"y\":1},{\"x\":\"B\",\"y\":2}]' | node chart.mjs --output out.png\n\nCustom Vega-Lite Spec\n\nFor advanced charts:\n\nnode chart.mjs --spec my-spec.json --output custom.png\n\n⚠️ IMPORTANT: Always Send the Image!\n\nAfter generating a chart, always send it back to the user's channel. Don't just save to a file and describe it — the whole point is the visual.\n\n# 1. Generate the chart\nnode chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png\n\n# 2. Send it! Use message tool with filePath:\n#    action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png\n\n\nTips:\n\nSave to /data/clawd/tmp/ (persistent) not /tmp/ (may get cleaned)\nUse action=send with filePath — thread-reply does NOT support file attachments\nInclude a brief caption in the message text\nAuto-use --dark between 20:00-07:00 Israel time\n\nUpdated: 2026-02-04 - Added --y-format (percent/dollar/compact/decimal4) and --subtitle"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/dannyshmueli/chart-image",
    "publisherUrl": "https://clawhub.ai/dannyshmueli/chart-image",
    "owner": "dannyshmueli",
    "version": "2.5.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/chart-image",
    "downloadUrl": "https://openagent3.xyz/downloads/chart-image",
    "agentUrl": "https://openagent3.xyz/skills/chart-image/agent",
    "manifestUrl": "https://openagent3.xyz/skills/chart-image/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/chart-image/agent.md"
  }
}