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

安装