skills.rest
claude-office-skills
claude-office-skillsOFFICIAL
Explore all skills by this author →
GitHub

chart-designer

Generate ECharts and Chart.js configurations for recommended chart types.

368|75|Updated Jan 29, 2026
Search Tags:#data visualization#analytics#dashboard#chart#chart.js#echarts
One-click install
npx skills add https://github.com/claude-office-skills/skills --skill chart-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart-designer
Source: https://github.com/claude-office-skills/skills/tree/main/chart-designer
Command: npx skills add https://github.com/claude-office-skills/skills --skill chart-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users create effective data visualizations by recommending the right chart types and generating configurations for popular charting libraries, simplifying the process of turning data into insights.

Core Features & Use Cases

  • Chart Recommendation: Suggests appropriate chart types based on data and desired story.
  • Configuration Generation: Provides ECharts and Chart.js JSON configurations.
  • Use Case: You have sales data for the last quarter and want to show the trend over time. This Skill can recommend a line chart and provide the necessary ECharts configuration to implement it.

Quick Start

Use the chart-designer skill to generate an ECharts configuration for a bar chart showing monthly sales data.

Frequently Asked Questions about chart-designer

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

FAQPage Schema
How do I choose the right chart type for my data visualization?▼

Choosing the right data visualization requires understanding your data types, target audience, and the story you want to tell. This skill analyzes these factors to recommend optimal chart formats for effective visual communication.

Can I generate ECharts or Chart.js configurations from raw data?▼

Yes, you can generate ECharts and Chart.js JSON configurations directly from raw data. The skill processes your dataset and outputs ready-to-use chart configurations for these popular charting libraries.

What is the best way to design a dashboard with multiple charts?▼

The best way to design a dashboard is by applying data visualization best practices to arrange multiple charts cohesively. This skill supports dashboard design by recommending appropriate chart formats and generating their configurations.

Do I need to know JavaScript to use the generated chart configurations?▼

You need basic frontend integration knowledge to implement the generated ECharts or Chart.js JSON configurations. The skill outputs the configuration objects, which you then render within your web application using the respective library.

Why does my line chart fail to show trends effectively?▼

A line chart may fail to show trends if the chart format does not match the data structure or narrative. This skill evaluates your data types and storytelling goals to recommend the most effective chart format for clarity.

Related Skills

Explore More Data & Analytics Skills→
easyspace-aieasyspace-ai

chart-visualization

Select optimal chart types and generate chart images from structured data.

Community
Advanced
Li-Bai-GOATLi-Bai-GOAT

chartjs-generator

Generate interactive charts with Chart.js for web applications.

Community
Intermediate
OpenSenseNovaOpenSenseNova
4.9k

range-reading-and-large-file-analysis

Convert large Excel files to Parquet and extract targeted data ranges.

Official
Intermediate
JingyiWngJingyiWng

databricks-aibi-dashboards

Build Databricks AI/BI dashboards by testing SQL queries and assembling widget specifications into JSON.

Community
Advanced