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

```markdown
# 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

```javascript
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
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}
```

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

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

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

---

## Color Palettes

### Professio