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 Installs197Repositoryclaude-office-s…s/skillsGitHub Stars16First Seen10 days agoSecurity AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onclaude-code151opencode93github-copilot92kimi-cli90gemini-cli90amp90