skills.rest
vibecode
vibecodeOFFICIAL
Explore all skills by this author →
Website𝕏@vibecodeappGitHub

ECharts

Render PNG or SVG charts from JSON configurations using Apache ECharts.

1|2|Updated Feb 28, 2026
Search Tags:#data visualization#charts#image generation#visualization#graphs#echarts
One-click install
npx skills add https://github.com/vibecode/Skillsforagent --skill echarts-vibecode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ECharts
Source: https://github.com/vibecode/Skillsforagent/tree/main/Foundational/echarts
Command: npx skills add https://github.com/vibecode/Skillsforagent --skill echarts-vibecode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires echarts, canvas, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows you to generate various types of charts and graphs as static image files (PNG or SVG) directly from JSON configuration, without needing to interact with external APIs or services.

Core Features & Use Cases

  • Local Chart Rendering: Creates chart images using Node.js and ECharts library.
  • Versatile Chart Types: Supports bar, line, pie, scatter, candlestick, gauge, heatmap, treemap, radar, funnel, sankey, and more.
  • Customizable Output: Control dimensions, themes, background colors, and output format (PNG/SVG).
  • Use Case: Visualize sales data from a CSV file by converting it into a PNG bar chart for a report.

Quick Start

Use the echarts skill to render a bar chart from the provided JSON configuration to a file named 'sales_chart.png'.

Frequently Asked Questions about ECharts

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

FAQPage Schema
How do I generate chart images from JSON data without external APIs?▼

You can generate chart images locally by rendering JSON configurations into static PNG or SVG files using a Node.js script and the Apache ECharts library, completely bypassing external API dependencies.

What chart types can I render locally using Apache ECharts?▼

Apache ECharts supports rendering diverse visualization types including bar, line, pie, scatter, candlestick, gauge, heatmap, treemap, radar, funnel, and sankey charts from your JSON configurations.

Do I need the canvas library to output PNG charts?▼

To render chart images as PNG files, you optionally need the 'canvas' library installed alongside Node.js, whereas SVG output can be generated without this additional dependency.

Can I customize the dimensions and background colors of generated charts?▼

Yes, you can control customizable output parameters including image dimensions, themes, and background colors directly within your JSON configuration before rendering the visualization.

What is the best way to visualize CSV data in a report?▼

The best way to visualize CSV data is to convert the data into a JSON configuration and render it as a static bar chart image file for immediate inclusion in your reports.

Does generating ECharts locally require an internet connection?▼

Generating ECharts visualizations locally does not require an internet connection because the Node.js script renders the charts directly on your machine using the installed libraries.

Related Skills

Explore More Design & Creative Skills→
zephyrwang6zephyrwang6
333

json-canvas

Create and edit JSON Canvas .canvas files with nodes, edges, and groups.

Community
Basic
hmzainjamilhmzainjamil
1

report-generator

Generate formatted reports with charts, tables, and metric summaries from structured data.

Community
Intermediate
jesseotremblayjesseotremblay
1

processing-data

Transform, clean, and extract structured information from CSV and JSON data.

Community
Basic
eyadsibaieyadsibai
7

visualization

Recommend Python visualization libraries and chart types for datasets.

Community
Basic