💻 Code Examples
Real-world examples and code snippets for ChartSmith MCP.
💾 Chart Output Formats
ChartSmith MCP supports multiple output formats:
html
: Complete standalone HTML files (recommended for sharing)json
: Plotly JSON for developers/embeddingsvg
: Vector graphicspng
: Raster images
Example: Request HTML Output
Create a bar chart with sales data and return as HTML:
- Product A: $150k
- Product B: $120k
- Product C: $180k
Format: HTML
Result: You get a complete HTML file that works in any browser!
🚀 Basic Chart Examples
Simple Bar Chart
Create a bar chart of our Q4 revenue by product:
- Product A: $150,000
- Product B: $120,000
- Product C: $98,000
- Product D: $85,000
Time Series Line Chart
Show our website traffic over the last 6 months:
January: 12,500 visitors
February: 13,200 visitors
March: 14,100 visitors
April: 15,800 visitors
May: 16,900 visitors
June: 18,200 visitors
Pie Chart for Proportions
Create a pie chart of our customer demographics:
- Age 18-25: 28%
- Age 26-35: 35%
- Age 36-45: 22%
- Age 46-55: 12%
- Age 56+: 3%
📊 Advanced Examples
Multi-Series Analysis
Compare sales performance across quarters:
Q1 2024: Product A: $45k, Product B: $38k, Product C: $29k
Q2 2024: Product A: $52k, Product B: $41k, Product C: $33k
Q3 2024: Product A: $48k, Product B: $44k, Product C: $36k
Q4 2024: Product A: $55k, Product B: $47k, Product C: $39k
Create a grouped bar chart showing quarterly trends by product.
Correlation Analysis
Analyze the relationship between marketing spend and sales:
Week 1: $5,000 spend, $125,000 sales
Week 2: $7,500 spend, $142,000 sales
Week 3: $6,200 spend, $135,000 sales
Week 4: $8,900 spend, $165,000 sales
Week 5: $4,100 spend, $118,000 sales
Create a scatter plot with trend line and correlation coefficient.
Geographic Data
Show our sales performance by region:
- California: $2.1M
- Texas: $1.8M
- New York: $1.6M
- Florida: $1.2M
- Illinois: $950K
Create a choropleth map if possible, or bar chart as alternative.
🧠AI-Powered Examples
Natural Language Requests
"I have customer satisfaction data from our support tickets.
What's the best way to visualize response times vs satisfaction scores?"
"Our e-commerce conversion rates vary by traffic source.
Can you help me understand which channels perform best?"
"Show me how our product adoption has changed since the new feature launch."
Data Analysis Requests
"Analyze this sales data and identify any concerning trends or opportunities:
[Paste your CSV or JSON data here]"
"What insights can you generate from our customer retention metrics?
Month 1: 95%, Month 2: 87%, Month 3: 82%, Month 6: 78%, Month 12: 74%"
📈 Dashboard Examples
Executive Dashboard
Create an executive dashboard with:
1. Monthly revenue trend (line chart)
2. Top 5 products by sales (horizontal bar chart)
3. Customer acquisition by channel (pie chart)
4. Regional performance comparison (bar chart)
Use a professional theme suitable for board presentations.
Marketing Analytics Dashboard
Build a marketing analytics dashboard showing:
1. Website traffic sources (pie chart)
2. Conversion funnel (sankey diagram)
3. Campaign performance over time (line chart)
4. Cost per acquisition by channel (bar chart)
5. ROI comparison (scatter plot)
Sales Operations Dashboard
Design a sales dashboard with:
1. Pipeline progression (funnel chart)
2. Sales rep performance (leaderboard/bar chart)
3. Deal size distribution (histogram)
4. Sales cycle length (box plot)
5. Win rate by product category (heatmap)
🎨 Styling Examples
Custom Color Schemes
Create a bar chart using our brand colors:
- Primary: #007bff (blue)
- Secondary: #28a745 (green)
- Accent: #ffc107 (yellow)
- Use these colors for the data series.
Dark Theme for Presentations
Generate a professional line chart with:
- Dark background suitable for presentations
- High contrast colors for visibility
- Clean, minimal styling
- Large, readable fonts
Interactive Features
Create an interactive scatter plot where:
- Users can hover to see data point details
- Points are colored by category
- Include zoom and pan capabilities
- Add a legend explaining the color coding
📊 Data Format Examples
CSV Data
Date,Revenue,Costs,Profit
2024-01-01,125000,75000,50000
2024-02-01,132000,78000,54000
2024-03-01,118000,72000,46000
2024-04-01,145000,85000,60000
JSON Data
{
"sales_data": [
{"product": "Product A", "q1": 45000, "q2": 52000, "q3": 48000, "q4": 55000},
{"product": "Product B", "q1": 38000, "q2": 41000, "q3": 44000, "q4": 47000},
{"product": "Product C", "q1": 29000, "q2": 33000, "q3": 36000, "q4": 39000}
]
}
Table Format
| Region | Q1 | Q2 | Q3 | Q4 |
|-----------|--------|--------|--------|--------|
| North | 125000 | 132000 | 128000 | 145000 |
| South | 98000 | 105000 | 112000 | 118000 |
| East | 156000 | 162000 | 158000 | 175000 |
| West | 87000 | 92000 | 95000 | 102000 |
🚀 Getting Started
- Copy any example above
- Paste it into Cursor
- ChartSmith MCP will generate the visualization
- Customize styling and formatting as needed
Pro Tips:
- Be specific about chart types and styling preferences
- Include context about your data and business goals
- Ask for insights and analysis, not just charts
- Experiment with different visualization types for the same data
Ready to start creating? Install ChartSmith MCP 🚀