chart-image

Generate PNG charts from JSON data using Vega-Lite and Sharp.

1|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/marcoamu/openclaw-workspace --skill chart-image-marcoamu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chart-image
Source: https://github.com/marcoamu/openclaw-workspace/tree/main/skills/chart-image
Command: npx skills add https://github.com/marcoamu/openclaw-workspace --skill chart-image-marcoamu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vega, vega-lite, sharp, and includes scripts (resource) components.

What problem does it solve?

Generate publication-quality PNG charts from JSON data.

Core Features & Use Cases

  • Supports line, bar, area, candlestick, heatmap, and pie/donut charts for dashboards, reports, and alerts.
  • No browser or native Canvas required; runs headless on Fly.io/VPS; outputs PNG via Sharp.
  • Use case: visualize time-series or categorical data automatically in automated reports.

Quick Start

Run a simple line chart by executing: node /data/clawd/skills/chart-image/scripts/chart.mjs --type line --data '[{"x":"Mon","y":10},{"x":"Tue","y":15}]' --output chart.png

Frequently Asked Questions about chart-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate PNG charts from JSON data in a headless environment?

To generate PNG charts from JSON data headlessly, you can build Vega-Lite specifications and render them via Sharp without requiring a browser. This allows automated chart creation for dashboards and reports on server environments like Fly.io or VPS.

What's the best way to automate chart generation for automated reports?

Automating chart generation for reports is best handled by building Vega-Lite specifications from JSON data and rendering PNGs via Sharp. This approach runs completely headless without native Canvas or browser dependencies, fitting seamlessly into automated workflows.

Does this chart generation approach support candlestick and heatmap visualizations?

Yes, the chart generation approach supports candlestick and heatmap visualizations, alongside line, bar, area, and pie/donut charts. It constructs Vega-Lite specifications to render these various chart types into publication-quality PNG outputs.

Can I render Vega-Lite charts on a VPS without a browser?

Yes, you can render Vega-Lite charts on a VPS without a browser by using Sharp to produce PNG outputs. This headless rendering method bypasses the need for native Canvas or browser environments while generating publication-quality visualizations.

When should I not use a browser-based approach for data-visualization?

You should avoid a browser-based approach for data-visualization when running headless on Fly.io or a VPS for automated reports. Instead, building Vega-Lite specifications and using Sharp to output PNGs provides the necessary chart generation without browser overhead.

How do I create a line chart from JSON data using the command line?

To create a line chart from JSON data via the command line, execute the chart script with arguments specifying the chart type, JSON data array, and output filename, generating a PNG file directly from the provided data.