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!

chart-designer