---
id: daily-chart-designer
name: "chart-designer"
url: https://skills.yangsir.net/skill/daily-chart-designer
author: claude-office-skills
domain: data-analysis
tags: ["data-visualization", "chart-recommendation", "charting-library", "visual-design"]
install_count: 2000
rating: 4.30 (48 reviews)
github: https://github.com/claude-office-skills/skills
---

# chart-designer

> 设计高效数据可视化方案，推荐图表类型并生成主流图表库的配置代码

**Stats**: 2,000 installs · 4.3/5 (48 reviews)

## Before / After 对比

### 数据可视化设计

**Before**:

面对数据不知道选择何种图表类型，手动编写图表库配置代码反复调试样式，可视化效果不佳导致数据洞察传达不清晰

**After**:

根据数据特征自动推荐最佳图表类型，直接生成目标图表库的完整配置代码，可视化方案专业且开箱即用，数据洞察一目了然

| Metric | Before | After | Change |
|---|---|---|---|
| 图表制作时间 | 30min | 5min | -83% |

## Readme

# chart-designer

# 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 → Line Chart
│   └─ Multiple series → Grouped/Stacked Bar
│
├─ Composition
│   ├─ Static → Pie/Donut (≤5) or Treemap
│   ├─ Over time → Stacked Area
│   └─ Hierarchical → Treemap/Sunburst
│
├─ Distribution
│   ├─ Single variable → Histogram
│   ├─ Multiple datasets → Box Plot
│   └─ Two variables → Scatter Plot
│
├─ Relationship
│   ├─ Two variables → Scatter Plot
│   ├─ Three variables → Bubble Chart
│   └─ Correlation matrix → Heatmap
│
└─ Flow/Process
    ├─ Sequential stages → Funnel
    ├─ Transitions → Sankey
    └─ Single metric → Gauge

```

## Output Format

```
# Chart Design: [Title]

**Data Type**: [Description]
**Purpose**: [What story to tell]
**Recommended Chart**: [Chart type]

---

## Chart Configuration

### ECharts

```javascript
const option = {
  title: {
    text: 'Chart Title',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Series 1', 'Series 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Series 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};

```

### Chart.js

```
const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Series 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart Title'
      }
    }
  }
};

```

## Styling Recommendations

### Color Palette

- Primary: `#5470c6`

- Secondary: `#91cc75`

- Accent: `#fac858`

- Neutral: `#73c0de`

### Typography

- Title: 16px, bold

- Labels: 12px, regular

- Axis: 11px, light

## Best Practices Applied

- [Practice 1]

- [Practice 2]

- [Practice 3]

## Alternative Charts

If this doesn't work well, consider:

- [Alternative 1] - when [condition]

- [Alternative 2] - when [condition]

```

---

## ECharts Common Configurations

### Bar Chart
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}

```

### Line Chart

```
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // for area chart
  }]
}

```

### Pie Chart

```
{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // donut
    data: [
      { value: 100, name: 'A' },
      { value: 200, name: 'B' }
    ]
  }]
}

```

### Scatter Plot

```
{
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[x1, y1], [x2, y2]],
    symbolSize: 10
  }]
}

```

## Color Palettes

### Professional

```
#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4

```

### Cool

```
#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd

```

### Warm

```
#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d

```

### Accessible (colorblind-friendly)

```
#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB

```

## Best Practices

### Data Ink Ratio

- Remove unnecessary gridlines

- Minimize chart junk

- Let data be the focus

### Clarity

- Clear, descriptive titles

- Labeled axes with units

- Appropriate precision (not too many decimals)

### Comparison

- Start y-axis at zero for bar charts

- Use consistent scales for comparison

- Sort data logically

### Color

- Use color purposefully

- Consider colorblind users

- Don't use too many colors (≤7)

### Interaction

- Tooltips for details

- Zoom for dense data

- Drill-down for hierarchies

## Tips for Better Charts

- **Know your audience** - technical vs. executive

- **Start with the question** - what are you trying to answer?

- **Choose the right chart** - don't force data into wrong formats

- **Simplify** - less is more

- **Label clearly** - assume viewers have no context

- **Test with real users** - is the message clear?

- **Consider accessibility** - colors, contrast, alt text

## Limitations

- Cannot render charts directly

- Configuration may need adjustment for specific tools

- Complex custom visualizations may require code

- Real-time data requires additional setup

*Built by the Claude Office Skills community. Contributions welcome!*
Weekly Installs197Repository[claude-office-s…s/skills](https://github.com/claude-office-skills/skills)GitHub Stars16First Seen10 days agoSecurity Audits[Gen Agent Trust HubPass](/claude-office-skills/skills/chart-designer/security/agent-trust-hub)[SocketPass](/claude-office-skills/skills/chart-designer/security/socket)[SnykPass](/claude-office-skills/skills/chart-designer/security/snyk)Installed onclaude-code151opencode93github-copilot92kimi-cli90gemini-cli90amp90

---
*Source: https://skills.yangsir.net/skill/daily-chart-designer*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-chart-designer/markdown*