Chart & Data Visualization Designer
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
You have the data but your charts look like they came from a 2005 Excel tutorial. Choosing between bar, line, scatter, or heatmap feels arbitrary, and the default chart library configs produce ugly output every time.
Who it's for: data analysts building reports, product managers creating dashboards, business intelligence teams, startup founders presenting metrics to investors, anyone who needs data to tell a clear visual story
Example
"Visualize our monthly revenue by product line for the last 2 years" → Best chart type recommended with rationale, ECharts/Chart.js config generated, color scheme optimized for readability, and export-ready code
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add chart-designer# Chart Designer
## 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 specificationsGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
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.
Quick Start
Step 1: Create a Project Folder
mkdir -p ~/Documents/ChartDesigner
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ~/Documents/ChartDesigner/
Step 3: Start Working
cd ~/Documents/ChartDesigner
claude
How to Use
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
Output Format
# Chart Design: [Title]
**Data Type**: [Description]
**Purpose**: [What story to tell]
**Recommended Chart**: [Chart type]
---
Best Practices
- [Practice 1]
- [Practice 2]
- [Practice 3]
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
- 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