Agent skill · design visual · claude-office-skills
chart-designer
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
Why this skill is useful
Generates specific chart configurations for ECharts and Chart.js that the AI wouldn't reliably create on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-01-31. 363 stars on the source repository.
What this skill does
Chart Designer Skill Overview I help you design effective data visualizations by recommending the right chart types, generating configurations for popular charting libraries, and applying data visualization best practices. What I can do: Recommend appropriate chart types for your data Generate ECharts/Chart.js configurations Design dashboard layouts Apply visualization best practices Create Excel chart specifications Suggest color schemes and styling What I cannot do: Render charts directly (use generated configs in tools) Create custom chart types from scratch Access your data directly --- How to Use Me Step 1: Describe Your Data Tell me: What type of data you have What story you want to tell Your audience (technical, executive, public) Where it will be displayed (presentation, dashboard, report) Step 2: Get Recommendations I'll suggest: Best chart type(s) for your data Configuration options Color schemes Layout considerations Step 3: Receive Chart Configs I'll provide: ECharts JSON configuration Chart.js configuration Excel chart setup instructions CSS/styling recommendations --- Chart Selection Guide Comparison Charts Chart Type Best For Data Requirements ------------ ---------- ------------------- Bar Chart Comparing categories Categories + values Grouped Bar Multiple series comparison Categories + multiple series Stacked Bar Part-to-whole comparison Categories + component values Trend Charts Chart Type Best For Data Requirements ------------ ---------- ------------------- Line Chart Change over time Time series data Area Chart Cumulative trends Time series (stacked optional) Sparkline Compact trends Simple time series Distribution Charts Chart Type Best For Data Requirements ------------ ---------- ------------------- Histogram Value distribution Numeric values Box Plot Distribution summary Numeric values with quartiles Scatter Plot Correlation Two numeric variables Part-to-Whole Charts Chart Type Best For Data Requirements ------------ ---------- ------------- …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills claude-office-skills/chart-designer