skills.rest
Rylaispirit
RylaispiritCOMMUNITY
Explore all skills by this author →
GitHub

chart-image

Generate SVG chart images from JSON data using a dependency-free Node.js script.

55|41|Updated Aug 9, 2026
Search Tags:#data visualization#json#svg#nodejs#plotting#chart#graph
One-click install
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills --skill chart-image-rylaispirit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart-image
Source: https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/main/skills/chart-image
Command: npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills --skill chart-image-rylaispirit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Turning raw data into a clear, correctly labeled chart often requires setting up plotting libraries, configuring axes, and manually checking for misleading scales or clipped labels. This Skill standardizes that workflow so charts are generated directly from the supplied data with explicit scales, labels, and visual QA. ## Core Features & Use Cases - Portable SVG chart generation: The bundled scripts/chart.mjs renders line, bar, area, and point charts to SVG with zero required dependencies, supporting titles, axis labels, dark themes, sparklines, multi-series grouping, and value annotations. - Flexible library choice: When richer output is needed, the workflow supports Matplotlib, Seaborn, Plotly, Vega-Lite, or the repository's existing chart stack, with optional PNG export via the sharp package. - Integrity safeguards: Enforces honest visualization practices such as appropriate axis baselines, disclosed truncation, no inferred values, and a reproducible script kept alongside the output. - Use Case: Given a JSON array of monthly revenue figures, produce a labeled line chart SVG with a title, axis units, and a first-to-last percentage change annotation for a quarterly report. ## Quick Start Ask the agent to create a labeled line chart from your JSON data, for example: "Use chart-image to plot this monthly sales data as an SVG line chart with axis titles and value labels."

Frequently Asked Questions about chart-image

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

FAQPage Schema
How do I generate an SVG chart from JSON data with Node.js?▼

Run the bundled script with your data: `node scripts/chart.mjs --data '[{"x":"A","y":3}]' --type line --output chart.svg`. You can also pipe a JSON array through stdin, and the script renders a labeled SVG without any required dependencies.

What chart types does the chart.mjs script support?▼

The script supports line, bar, area, and point charts, plus a compact sparkline mode that hides axes. It also offers multi-series grouping via `--series-field`, dark themes, value labels, and first-to-last percentage change annotations.

Can I export charts as PNG instead of SVG?▼

PNG output is supported only when the optional `sharp` npm package is installed; otherwise the script writes SVG. Specify an output path ending in `.png` and the script will attempt the conversion or report that sharp is missing.

Matplotlib vs Plotly vs the bundled script for chart generation?▼

The bundled chart.mjs script is dependency-free and best for quick portable SVG output. Matplotlib and Seaborn suit Python-based statistical plots, while Plotly and Vega-Lite fit interactive or web-embedded visualizations.

Why does my chart show a misleading or truncated axis?▼

Axes default to a domain starting at zero unless you override it with `--y-domain MIN,MAX`. The workflow requires starting quantitative axes at an appropriate baseline and disclosing any truncation to avoid misleading viewers.

What data format does the chart script require?▼

The script expects a non-empty JSON array of objects, passed via `--data` or stdin. By default it reads `x` and `y` fields, but you can remap them with `--x-field` and `--y-field`, and y values must be numeric.

Related Skills

Explore More Data & Analytics Skills→
h4vzzh4vzz
33

data-cleaning

Clean raw datasets into analysis-ready tables using pandas, pyjanitor, and great_expectations.

Community
Advanced
openaiopenai
5.3k

reports-pdfs-and-slide-automation

Compose chart assets into reports, PDFs, PowerPoint decks, and Google Slides documents.

Official
Advanced
EpiphyticEpiphytic
7

statistical-analysis

Analyze datasets to identify statistical patterns, differences, and anomalies.

Official
Intermediate
jaechang-hitsjaechang-hits
298

Plotly Interactive Plots

Generate interactive Plotly charts with hover, zoom, and pan.

Community
Intermediate