chart-designer

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
# ═══════════════════════════════════════════════════════════════════════════════
# CLAUDE OFFICE SKILL - Chart Designer
# ═══════════════════════════════════════════════════════════════════════════════

name: chart-designer
description: "Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports."
version: "1.0.0"
author: claude-office-skills
license: MIT

category: visualization
tags:
  - chart
  - data-visualization
  - echarts
  - dashboard
  - analytics
department: Data/Analytics

models:
  recommended:
    - claude-sonnet-4
    - claude-opus-4
  compatible:
    - claude-3-5-sonnet
    - gpt-4
    - gpt-4o

mcp:
  server: office-mcp
  tools:
    - create_chart
    - read_xlsx
    - create_xlsx

capabilities:
  - chart_selection
  - data_visualization
  - dashboard_design
  - configuration_generation
  - best_practices

languages:
  - en
  - zh

related_skills:
  - data-analysis
  - infographic
  - report-generator
---

# 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 |
|------------|----------|-------------------|
| Pie Chart | Simple proportions (≤5 items) | Categories + percentages |
| Donut Chart | Proportions with total | Categories + percentages |
| Treemap | Hierarchical proportions | Hierarchical data + values |

### Specialized Charts
| Chart Type | Best For | Data Requirements |
|------------|----------|-------------------|
| Funnel | Process stages/conversion | Stages + values |
| Gauge | Single KPI vs target | Current value + target |
| Heatmap | Matrix comparisons | Row + Column + Value |
| Radar | Multi-dimensional comparison | Multiple metrics per item |
| Sankey | Flow/transitions | Source + Target + Value |

---

## Decision Tree

```
What do you want to show?
│
├─ Comparison
│   ├─ Among items → Bar Chart
│   ├─ Over time