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

Trend Charts

Distribution Charts

Part-to-Whole Charts

Specialized Charts

---

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

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

1. [Practice 1]
2. [Practice 2]
3. [Practice 3]

---

## Alternative Charts

If this doesn't work well, consider:
1. [Alternative 1] - when [condition]
2. [Alternative 2] - when [condition]

---

ECharts Common Configurations

Bar Chart

{
  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

1. Know your audience - technical vs. executive 2. Start with the question - what are you trying to answer? 3. Choose the right chart - don't force data into wrong formats 4. Simplify - less is more 5. Label clearly - assume viewers have no context 6. Test with real users - is the message clear? 7. 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!