💻 Code Examples

Real-world examples and code snippets for ChartSmith MCP.

💾 Chart Output Formats

ChartSmith MCP supports multiple output formats:

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

  1. Copy any example above
  2. Paste it into Cursor
  3. ChartSmith MCP will generate the visualization
  4. Customize styling and formatting as needed

Pro Tips:

Ready to start creating? Install ChartSmith MCP 🚀