skills.rest
genesis-agents
genesis-agentsCOMMUNITY
Explore all skills by this author →
GitHub

chart-renderer

Render charts as SVG strings from data using ECharts server-side.

2|3|Updated Nov 9, 2025
Search Tags:#rendering#slides#svg#chart#data-visualization#echarts
One-click install
npx skills add https://github.com/genesis-agents/GenesisPod --skill chart-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart-renderer
Source: https://github.com/genesis-agents/GenesisPod/tree/main/backend/src/modules/ai-app/office/slides/skills/chart-renderer
Command: npx skills add https://github.com/genesis-agents/GenesisPod --skill chart-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates ready-to-use ECharts chart configurations and SVG strings from data for embedding in slides, reports, or web pages.

Core Features & Use Cases

  • Renders charts as SVG strings using ECharts SSR mode.
  • Infers the appropriate chart type (line, bar, pie, radar) from data and content.
  • Accepts data from content sections or can generate sample data for previews.
  • Supports light/dark themes and graceful fallbacks for render failures.

Quick Start

Provide your data payload and optional rendering options to generate an embeddable SVG chart.

Frequently Asked Questions about chart-renderer

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

FAQPage Schema
How do I generate SVG charts from data for embedding in slides or reports?▼

You can generate SVG charts by providing your data payload and optional rendering options to produce ready-to-use ECharts configurations and embeddable SVG strings for slides, reports, or web pages.

Can I automatically infer the chart type from my data visualization payload?▼

Yes, this process automatically infers the appropriate chart type, such as line, bar, pie, or radar, directly from the input data and content sections.

Does ECharts server-side rendering support light and dark themes?▼

Yes, ECharts server-side rendering supports both light and dark themes, and it includes graceful fallbacks to handle any potential rendering failures.

What is the best way to render ECharts configurations without a browser environment?▼

Using server-side rendering mode is the best way to render ECharts configurations without a browser, directly outputting SVG strings for embedding into dashboards and reports.

Do I need to provide my own data to preview SVG chart rendering?▼

You do not need to provide your own data to preview SVG chart rendering, because the system can automatically generate sample data for previews if input data is absent.

Related Skills

Explore More Design & Creative Skills→
npc-livenpc-live
168

visual-skills

Identify structured data semantics and render interactive HTML charts via ECharts.

Official
Advanced
wachawowachawo

ckm:slides

Generate responsive HTML presentation decks with Chart.js visualizations.

Community
Intermediate
aiden0zaiden0z
4

vibe-deck

Generate presentation decks with charts and themes from natural language descriptions.

Community
Intermediate
lance-doniflance-donif

cloudbase-document-database-web-sdk

Execute database reads, writes, and real-time updates in web browsers via CloudBase.

Community
Intermediate