# SlidesChart - AI Integration Guide

> SlidesChart is a professional charting tool for Google Slides, equivalent to think-cell for PowerPoint. This document describes how AI assistants can use SlidesChart to create charts.

## Overview

SlidesChart provides consulting-grade charts for Google Slides including 104 chart types (full Vizzlo feature parity + think-cell differentiators):

### Standard Charts
- **Line Chart** - Trends over time with multiple series, area fill, data labels
- **Area Chart** - Cumulative trends (stacked, 100%, stream variants)
- **Column/Bar Chart** - Vertical bars with auto-totals
- **Grouped Bar Chart** - Side-by-side bars comparing multiple series
- **Stacked Bar Chart** - Cumulative bars (supports 100% mode)
- **Pie Chart** - Pie with exploding slices and labels
- **Donut Chart** - Pie with customizable inner radius (0.1-0.9)
- **Half Pie Chart** - Semi-circle pie for compact displays
- **Combo Chart** - Column + line combination with dual axis support

### Business & Financial Charts
- **Waterfall/Bridge charts** - Revenue bridges, EBITDA analysis with E-Bridges
- **Marimekko (Mekko) charts** - Market share with smart label placement
- **Gantt charts** - Project timelines with Harvey balls, calendar snapping, dependencies
- **Sankey diagrams** - Flow visualization
- **Funnel charts** - Sales pipelines, conversion funnels
- **Butterfly/Tornado charts** - Comparative analysis with bidirectional bars
- **Pareto Chart** - Sorted bars with cumulative line

### Strategic & Matrix Charts
- **BCG Matrix** - Portfolio analysis (Stars, Cash Cows, Dogs, Question Marks)
- **SWOT Analysis** - Strengths, Weaknesses, Opportunities, Threats
- **Comparison Matrix** - Feature comparison with ratings
- **Empathy Map** - User research visualization
- **Balanced Scorecard** - Four perspectives strategy map
- **Business Model Canvas** - Nine building blocks framework

### Timeline & Project Charts
- **Timeline Chart** - Events on a horizontal axis
- **Project Phase Chart** - Duration bars for project phases
- **Milestone Chart** - Diamond/triangle markers for key dates
- **Rhombus Milestone** - Diamond-shaped milestone plan (up to 10 milestones)
- **Triangle Milestone** - Triangle markers with alternating positions
- **Arrow Milestone** - Connected arrow segments for project phases
- **Milestone List** - Vertical numbered list of milestones
- **Roadmap** - Swim lanes with multiple time periods
- **Fishbone Diagram** - Cause-and-effect (Ishikawa) analysis
- **Circular Agenda** - Time blocks arranged around a clock face
- **Fishbone Timeline** - Events branching off alternately like a fishbone
- **Layered Timeline** - Multiple parallel tracks/layers

### Process & Cycle Charts
- **Cycle Diagram** - Circular repeating process steps
- **Process Flow** - Horizontal/vertical step sequences
- **Onion Chart** - Layered concentric circles
- **Gearwheels Chart** - Interconnected gears showing interdependent processes
- **Feedback Loop** - Circular cause-and-effect relationships

### Organizational Charts
- **Org Chart** - Hierarchical organization structure
- **Pyramid Chart** - Hierarchical data visualization
- **Population Pyramid** - Bidirectional bar chart for demographics
- **Brain Chart** - Left brain/right brain concept visualization
- **Human Body** - Anatomical data visualization with region highlights

### Statistical Charts
- **Box Plot** - Statistical distribution (box and whisker)
- **Dot Plot** - Comparing values across categories
- **Slopegraph** - Change between two time periods
- **Range Plot** - Error bars and confidence intervals
- **Histogram** - Frequency distribution
- **Scatter Chart** - Correlation with trend lines
- **Bubble Chart** - Three-dimensional data (x, y, size)

### Specialty Charts
- **Radar/Spider Chart** - Multi-dimensional comparison
- **Treemap** - Hierarchical data as nested rectangles
- **Gauge Chart** - KPI visualization with color zones
- **Venn Diagram** - Set relationships (2 or 3 sets)
- **Radial Bar Chart** - Circular progress bars
- **Nightingale Rose** - Polar area chart
- **Word Cloud** - Text visualization by frequency
- **Pictograph** - Icon-based data representation
- **Progress Bars** - Completion percentage visualization
- **Retention Chart** - Cohort analysis heatmap
- **World Map** - Geographic data visualization
- **Calendar Chart** - Heatmap by date
- **Growth Bar Chart** - Bars with YoY growth indicators
- **Ribbon Bar Chart** - Curved/flowing bar visualization
- **Multiple Pies** - Side-by-side pie chart comparison
- **Stacked Time Series** - Cumulative area trends over time

### Gauge & Indicator Charts
- **Circular Gauge** - Speedometer-style with zones
- **Control Knob** - Rotary dial setting visualization
- **Dart Chart** - Target/bullseye accuracy display
- **Alarm Clock** - Time or countdown display
- **Hourglass** - Time remaining/progress indicator
- **Scales Chart** - Balance scales comparing two values
- **Up/Down Arrows** - Increase/decrease indicators
- **Value Projection** - Current vs projected value
- **Analog Clock** - Clock face visualization
- **Radial Percentage** - Circular progress indicator

### Business Graphics
- **Signpost Chart** - Direction/options visualization
- **Color Fan** - Hand fan style option display
- **Folder Chart** - Filing cabinet categorization
- **Bottle Chart** - Fill level/capacity indicator
- **Hamburger Chart** - Layered component diagram
- **Ribbon List** - Numbered ribbon-style list
- **Leaf Chart** - Organic/growth themed progress
- **Growing Leaf** - Multi-stage growth visualization
- **Idea Chart** - Lightbulb/brainstorming diagram
- **Blow-up Chart** - Magnified portion drill-down
- **Message Chart** - Speech bubble/quote display
- **Thumbs Chart** - Approval rating (thumbs up/down)
- **Puzzle Chart** - Interlocking pieces diagram
- **Keep Calm Chart** - Customizable "Keep Calm" poster
- **Paint Canvas** - Freeform drawing with shapes and paths

### Funnel Variants
- **Vertical Funnel** - Standard conversion funnel
- **Bird's Eye Funnel** - Top-down circular funnel view

### Data Tables
- **Data Table** - Styled table with conditional formatting

### Survey & Sentiment Analysis
- **Sentiment Chart** - Positive/neutral/negative distribution
- **NPS Gauge** - Net Promoter Score visualization
- **Likert Chart** - Survey response scales

### Think-Cell Differentiators
- **Smart Paste Data** - Update chart data preserving formatting
- **E-Bridge** - Delta annotation between waterfall bars
- **CAGR Arrow** - Auto-calculated compound growth rate
- **Value Line** - Reference lines for targets/benchmarks
- **Harvey Ball** - Progress circle indicator
- **Difference Arrow** - Absolute/percentage change annotation
- **Total Label** - Auto-summed totals for stacked charts

## MCP Server Integration

SlidesChart provides an MCP (Model Context Protocol) server that enables AI assistants like Claude to create charts programmatically.

### Installation

```bash
npm install @slideschart/mcp-server
```

### Configuration for Claude Code

Add to `~/.claude/settings.json`:

```json
{
  "mcpServers": {
    "slideschart": {
      "command": "npx",
      "args": ["@slideschart/mcp-server"]
    }
  }
}
```

## Available Tools (100+)

### Standard Charts

#### create_line_chart

Create a line chart for trends over time.

**Parameters:**
- `categories`: X-axis labels (e.g., months, years)
- `series`: Array with name, values, color, showArea
- `title`, `xAxisLabel`, `yAxisLabel`: Labels
- `showDataLabels`: Show values on data points

**Example:**
```json
{
  "categories": ["Jan", "Feb", "Mar", "Apr", "May"],
  "series": [
    {"name": "2023", "values": [100, 120, 115, 140, 160]},
    {"name": "2024", "values": [110, 135, 145, 165, 190], "color": "#34A853"}
  ],
  "title": "Monthly Revenue Trend"
}
```

#### create_area_chart

Create an area chart for cumulative trends.

**Parameters:**
- `categories`, `series`: Same as line chart
- `style`: "stacked", "percent", or "stream"

#### create_column_chart

Create a column/bar chart with multiple variants.

**Parameters:**
- `categories`: Category labels
- `series`: Array with name, values, color
- `style`: "grouped", "stacked", or "percent"
- `orientation`: "vertical" or "horizontal"
- `showDataLabels`: Show values on bars
- `showTotals`: Show sum above stacked columns

**Example:**
```json
{
  "categories": ["Q1", "Q2", "Q3", "Q4"],
  "series": [
    {"name": "Product A", "values": [250, 300, 280, 350]},
    {"name": "Product B", "values": [180, 200, 240, 280]}
  ],
  "style": "stacked",
  "showTotals": true,
  "title": "Quarterly Sales by Product"
}
```

#### create_pie_chart

Create a pie or donut chart.

**Parameters:**
- `slices`: Array with name, value, color, explode (boolean)
- `style`: "pie", "donut", or "half"
- `showPercentages`: Show percentage labels
- `innerRadius`: For donut, 0-0.8

**Example:**
```json
{
  "slices": [
    {"name": "Desktop", "value": 55},
    {"name": "Mobile", "value": 35},
    {"name": "Tablet", "value": 10, "explode": true}
  ],
  "style": "donut",
  "title": "Traffic by Device"
}
```

#### create_combo_chart

Create a combination chart with columns and lines.

**Parameters:**
- `categories`: X-axis labels
- `columnSeries`: Bar/column data series
- `lineSeries`: Line data series (can use secondary axis)
- `yAxisLabel`, `secondaryYAxisLabel`: Axis labels

**Example:**
```json
{
  "categories": ["Jan", "Feb", "Mar", "Apr"],
  "columnSeries": [
    {"name": "Revenue", "values": [100, 120, 150, 180]}
  ],
  "lineSeries": [
    {"name": "Margin %", "values": [25, 28, 30, 32], "useSecondaryAxis": true}
  ],
  "yAxisLabel": "Revenue ($K)",
  "secondaryYAxisLabel": "Margin %"
}
```

### Business Charts

#### create_waterfall_chart

Create a waterfall/bridge chart showing incremental changes.

**Use cases:**
- Revenue bridges (Start -> Revenue -> Costs -> Tax -> End)
- EBITDA analysis
- Cost breakdown analysis
- Year-over-year change analysis

**Parameters:**
- `categories`: Array of bar labels
- `values`: Array of values (positive = increase, negative = decrease)
- `types`: Array of types ("increase", "decrease", "total")
- `title`: Chart title
- `bridges`: Optional E-Bridge annotations showing delta between bars

**Example:**
```json
{
  "categories": ["2023 Revenue", "+Product A", "+Product B", "-Returns", "-Discounts", "2024 Revenue"],
  "values": [1000, 250, 150, -50, -30, 0],
  "types": ["total", "increase", "increase", "decrease", "decrease", "total"],
  "title": "Revenue Bridge 2023-2024",
  "bridges": [
    {"startIndex": 0, "endIndex": 5, "label": "32% Growth"}
  ]
}
```

#### create_mekko_chart

Create a Marimekko chart with variable-width columns for market share analysis.

**Use cases:**
- Market share by region
- Portfolio composition
- Segment analysis

**Parameters:**
- `categories`: Category names (columns)
- `widths`: Width weights representing market size
- `series`: Data series with name, data array, and optional color
- `title`: Chart title

**Example:**
```json
{
  "categories": ["North America", "Europe", "Asia Pacific"],
  "widths": [35, 30, 35],
  "series": [
    {"name": "Company A", "data": [45, 30, 25]},
    {"name": "Company B", "data": [30, 40, 35]},
    {"name": "Others", "data": [25, 30, 40]}
  ],
  "title": "Global Market Share"
}
```

#### create_gantt_chart

Create a Gantt chart for project timelines.

**Use cases:**
- Project schedules
- Sprint planning
- Resource allocation

**Parameters:**
- `tasks`: Array of tasks with id, name, start, end, progress, dependencies
- `milestones`: Array of milestones with name and date
- `showHarveyBalls`: Show Harvey ball progress indicators
- `snapToCalendar`: Snap dates to calendar boundaries
- `snapUnit`: "day", "week", "month", or "quarter"

**Example:**
```json
{
  "tasks": [
    {"id": "1", "name": "Design", "start": "2024-01-01", "end": "2024-01-15", "progress": 100},
    {"id": "2", "name": "Development", "start": "2024-01-15", "end": "2024-02-15", "progress": 60, "dependencies": ["1"]},
    {"id": "3", "name": "Testing", "start": "2024-02-01", "end": "2024-02-28", "progress": 20, "dependencies": ["2"]}
  ],
  "milestones": [
    {"name": "Launch", "date": "2024-03-01"}
  ],
  "showHarveyBalls": true,
  "snapToCalendar": true,
  "snapUnit": "week",
  "title": "Project Timeline"
}
```

#### create_sankey_chart

Create a Sankey diagram for flow visualization.

**Parameters:**
- `nodes`: Array of nodes with id and name
- `links`: Array of links with source, target, and value

#### create_funnel_chart

Create a funnel chart for conversion analysis.

**Parameters:**
- `stages`: Array of stages with name and value
- `style`: "funnel", "pyramid", or "pipe"
- `showPercentages`: Show conversion percentages

#### create_butterfly_chart

Create a butterfly/tornado chart for comparative analysis.

**Parameters:**
- `categories`: Category labels (center)
- `leftValues`, `rightValues`: Values for each side
- `leftLabel`, `rightLabel`: Side labels
- `leftColor`, `rightColor`: Bar colors

#### create_pareto_chart

Create a Pareto chart (sorted bars with cumulative line).

**Parameters:**
- `categories`: Category labels
- `values`: Values (will be sorted descending)
- `barColor`, `lineColor`: Colors

### Strategic Charts

#### create_bcg_matrix

Create a BCG Growth-Share Matrix for portfolio analysis.

**Parameters:**
- `items`: Array with name, marketShare (0-100), growthRate (0-100), size, color
- `title`: Chart title

**Example:**
```json
{
  "items": [
    {"name": "Product A", "marketShare": 70, "growthRate": 80, "size": 30},
    {"name": "Product B", "marketShare": 20, "growthRate": 60, "size": 20},
    {"name": "Product C", "marketShare": 80, "growthRate": 20, "size": 40}
  ],
  "title": "Product Portfolio"
}
```

#### create_swot_analysis

Create a SWOT Analysis diagram.

**Parameters:**
- `strengths`: Array of strength items
- `weaknesses`: Array of weakness items
- `opportunities`: Array of opportunity items
- `threats`: Array of threat items

#### create_comparison_matrix

Create a feature comparison matrix.

**Parameters:**
- `features`: Row headers (features to compare)
- `competitors`: Column headers (products/competitors)
- `ratings`: 2D array (numbers 1-5 or "check", "x", "partial")

#### create_empathy_map

Create an Empathy Map for user research.

**Parameters:**
- `personaName`: Name of the user persona
- `thinks`, `sees`, `does`, `feels`, `hears`, `says`: Arrays of observations

#### create_balanced_scorecard

Create a Balanced Scorecard with four perspectives.

**Parameters:**
- `financial`: {objectives: [], measures: []}
- `customer`: {objectives: [], measures: []}
- `internalProcess`: {objectives: [], measures: []}
- `learningGrowth`: {objectives: [], measures: []}

#### create_business_model_canvas

Create a Business Model Canvas with all nine building blocks.

**Parameters:**
- `keyPartners`, `keyActivities`, `keyResources`: Arrays
- `valuePropositions`, `customerRelationships`, `channels`: Arrays
- `customerSegments`, `costStructure`, `revenueStreams`: Arrays

### Timeline Charts

#### create_timeline_chart

Create a simple timeline with events.

**Parameters:**
- `events`: Array with name, date, color
- `markerShape`: "circle", "diamond", "square", "arrow"

#### create_project_phase_chart

Create a project phase timeline with duration bars.

**Parameters:**
- `phases`: Array with name, start, end, color

#### create_milestone_chart

Create a milestone chart with markers.

**Parameters:**
- `milestones`: Array with name, date, color
- `style`: "rhombus", "triangle", "arrow"

#### create_roadmap

Create a product roadmap with swim lanes.

**Parameters:**
- `periods`: Array of time period labels (e.g., "Q1 2024")
- `lanes`: Array with name and items [{name, startPeriod, duration, color}]

**Example:**
```json
{
  "periods": ["Q1 2024", "Q2 2024", "Q3 2024", "Q4 2024"],
  "lanes": [
    {
      "name": "Frontend",
      "items": [
        {"name": "Redesign", "startPeriod": 0, "duration": 2},
        {"name": "Mobile App", "startPeriod": 2, "duration": 2}
      ]
    },
    {
      "name": "Backend",
      "items": [
        {"name": "API v2", "startPeriod": 1, "duration": 2}
      ]
    }
  ]
}
```

#### create_fishbone_diagram

Create a fishbone (Ishikawa) diagram for cause-and-effect analysis.

**Parameters:**
- `effect`: The main effect/problem at the head
- `categories`: Array with name and causes array

**Example:**
```json
{
  "effect": "Low Customer Satisfaction",
  "categories": [
    {"name": "People", "causes": ["Training gaps", "High turnover"]},
    {"name": "Process", "causes": ["Long wait times", "Complex procedures"]},
    {"name": "Technology", "causes": ["Outdated systems", "Frequent downtime"]}
  ]
}
```

### Process Charts

#### create_cycle_diagram

Create a circular cycle diagram.

**Parameters:**
- `steps`: Array with name, description, color
- `showArrows`: Show directional arrows
- `centerText`: Text in center

#### create_process_flow

Create a horizontal or vertical process flow.

**Parameters:**
- `steps`: Array with name, description, icon, color
- `orientation`: "horizontal" or "vertical"
- `connectorStyle`: "arrow", "line", or "chevron"

#### create_onion_chart

Create an onion diagram with concentric circles.

**Parameters:**
- `layers`: Array with name, color (center to outer)

### Organizational Charts

#### create_org_chart

Create an organizational chart.

**Parameters:**
- `root`: Root node with name, title, children (recursive structure)
- `showPhotos`: Show photo placeholders

#### create_pyramid_chart

Create a pyramid chart.

**Parameters:**
- `levels`: Array with name, value, color (from top to bottom)
- `style`: "gradient", "stepped", "outlined"

#### create_population_pyramid

Create a population pyramid (bidirectional bar chart).

**Parameters:**
- `categories`: Age groups or categories (center)
- `leftValues`, `rightValues`: Values for each side
- `leftLabel`, `rightLabel`: Labels for each side

### Statistical Charts

#### create_box_plot

Create a box and whisker plot.

**Parameters:**
- `groups`: Array with name and either:
  - `values`: Raw data (stats auto-calculated)
  - OR `min`, `q1`, `median`, `q3`, `max`
- `showOutliers`, `showMean`: Display options

#### create_dot_plot

Create a dot plot.

**Parameters:**
- `categories`: Category labels
- `series`: Array with name, values, color
- `showConnectors`: Connect dots across series

#### create_slopegraph

Create a slopegraph showing change.

**Parameters:**
- `items`: Array with name, start, end values
- `startLabel`, `endLabel`: Period labels

#### create_range_plot

Create a range plot with min-max ranges.

**Parameters:**
- `categories`: Category labels
- `ranges`: Array with min, max, mean, color
- `showMean`: Show mean markers
- `orientation`: "vertical" or "horizontal"

#### create_histogram

Create a histogram.

**Parameters:**
- `values`: Raw data values
- `binCount`: Number of bins
- `showCurve`: Overlay normal distribution

#### create_scatter_chart

Create a scatter plot.

**Parameters:**
- `series`: Array with name, points [{x, y, label}], color
- `showTrendLine`: Show regression line

#### create_bubble_chart

Create a bubble chart.

**Parameters:**
- `bubbles`: Array with x, y, size, label, color

### Specialty Charts

#### create_radar_chart

Create a radar/spider chart.

**Parameters:**
- `categories`: Dimension labels (minimum 3)
- `series`: Array with name, values, color

#### create_treemap_chart

Create a treemap.

**Parameters:**
- `items`: Array with name, value, color

#### create_gauge_chart

Create a gauge/speedometer chart.

**Parameters:**
- `value`: Current value
- `minValue`, `maxValue`: Scale range
- `zones`: Array with from, to, color

#### create_venn_diagram

Create a Venn diagram.

**Parameters:**
- `sets`: Array with name, value, type ("set", "intersection", "center")

#### create_radial_bar_chart

Create circular progress bars.

**Parameters:**
- `items`: Array with name, value (0-100), color
- `centerValue`, `centerLabel`: Center display

#### create_nightingale_rose

Create a Nightingale Rose (polar area) chart.

**Parameters:**
- `segments`: Array with name, value, color

#### create_word_cloud

Create a word cloud.

**Parameters:**
- `words`: Array with text, value (importance), color

#### create_pictograph

Create icon-based visualization.

**Parameters:**
- `categories`, `values`: Data
- `icon`: Any character or emoji
- `valuePerIcon`: What each icon represents

#### create_progress_bars

Create progress bar chart.

**Parameters:**
- `items`: Array with name, value (0-100), target, color
- `showTargets`: Show target lines

#### create_retention_chart

Create a cohort retention heatmap.

**Parameters:**
- `cohorts`: Row labels (cohort names)
- `periods`: Column labels (time periods)
- `values`: 2D array of retention percentages

#### create_world_map

Create a world map visualization.

**Parameters:**
- `regions`: Array with code (ISO), value, color
- `colorScale`: "sequential", "diverging", "categorical"
- `showLegend`: Show color legend

#### create_calendar_chart

Create a calendar heatmap.

**Parameters:**
- `data`: Array with date (YYYY-MM-DD), value
- `year`: Year to display
- `colorScale`: "green", "blue", "red", "purple"

### Survey & Sentiment

#### create_sentiment_chart

Create a sentiment analysis chart.

**Parameters:**
- `categories`: Topic/question labels
- `sentiments`: Array of {negative, neutral, positive} values

#### create_nps_gauge

Create a Net Promoter Score gauge.

**Parameters:**
- `promoters`: Count (9-10 rating)
- `passives`: Count (7-8 rating)
- `detractors`: Count (0-6 rating)

#### create_likert_chart

Create a Likert scale chart.

**Parameters:**
- `questions`: Survey questions
- `responses`: Array of [SD, D, N, A, SA] counts

### Annotations

#### add_cagr_arrow

Add a CAGR (Compound Annual Growth Rate) annotation.

**Parameters:**
- `startValue`, `endValue`: Values to calculate CAGR
- `periods`: Number of periods

#### add_value_line

Add a horizontal reference line (target, average).

**Parameters:**
- `value`: Line position value
- `label`: Label text (e.g., "Target", "Average")
- `color`: Line color

#### add_difference_arrow

Add a difference arrow between two data points.

**Parameters:**
- `startValue`, `endValue`: Values to compare
- `showAbsolute`: Show absolute difference
- `showPercent`: Show percentage change

#### add_total_label

Add an automatic total label above stacked elements.

**Parameters:**
- `values`: Array of values to sum
- `format`: "number", "currency", or "percent"
- `prefix`, `suffix`: Optional text

#### create_harvey_ball

Create a Harvey ball progress indicator.

**Parameters:**
- `progress`: Percentage (0-100)
- `size`: Diameter in pixels
- `color`: Fill color

### Vizzlo Parity: Additional Charts

#### create_circular_agenda

Create a circular agenda chart showing time blocks around a clock face.

**Parameters:**
- `items`: Array with name, startTime (HH:MM), endTime (HH:MM), color
- `centerText`: Optional text in center

#### create_fishbone_timeline

Create a timeline with events branching off alternately.

**Parameters:**
- `events`: Array with name, date, description, color

#### create_layered_timeline

Create a timeline with multiple parallel tracks.

**Parameters:**
- `layers`: Array with name and events array

#### create_gearwheels_chart

Create interconnected gearwheels showing interdependent processes.

**Parameters:**
- `gears`: Array with name, description, size ("small"/"medium"/"large"), color

#### create_feedback_loop

Create a feedback loop diagram.

**Parameters:**
- `nodes`: Array with name, description, color
- `connections`: Array with from, to (indices), label, type ("positive"/"negative")

#### create_circular_gauge

Create a circular gauge (speedometer style).

**Parameters:**
- `value`, `minValue`, `maxValue`: Gauge range
- `zones`: Array with from, to, color, label

#### create_control_knob

Create a control knob visualization.

**Parameters:**
- `value`, `minValue`, `maxValue`: Knob range
- `label`, `color`

#### create_dart_chart

Create a dart/target chart showing accuracy.

**Parameters:**
- `target`: Target value
- `actual`: Actual achieved value

#### create_alarm_clock

Create an alarm clock visualization.

**Parameters:**
- `time`: Time to display (HH:MM)
- `alarmSet`: Boolean for alarm indicator

#### create_hourglass

Create an hourglass visualization.

**Parameters:**
- `percentRemaining`: Percentage of sand remaining (0-100)
- `topLabel`, `bottomLabel`: Optional labels

#### create_scales_chart

Create a balance scales chart.

**Parameters:**
- `leftValue`, `rightValue`: Values to compare
- `leftLabel`, `rightLabel`, `leftColor`, `rightColor`

#### create_up_down_arrows

Create up/down arrow indicators.

**Parameters:**
- `items`: Array with name, value, change, changePercent
- `upColor`, `downColor`: Colors for indicators

#### create_value_projection

Create a value projection chart.

**Parameters:**
- `currentValue`, `projectedValue`: Values
- `currentLabel`, `projectedLabel`: Labels
- `showGrowth`: Show growth percentage

#### create_analog_clock

Create an analog clock face.

**Parameters:**
- `time`: Time (HH:MM or HH:MM:SS)
- `showSeconds`: Show second hand
- `style`: "classic", "modern", "minimal"

#### create_radial_percentage

Create a circular percentage indicator.

**Parameters:**
- `percentage`: 0-100
- `label`, `color`, `showPercentage`

#### create_growth_bar_chart

Create a bar chart with growth indicators.

**Parameters:**
- `categories`: Labels
- `currentValues`, `previousValues`: Data arrays
- `showGrowthPercent`: Show percentage growth

#### create_ribbon_bar_chart

Create a ribbon-style bar chart.

**Parameters:**
- `categories`, `values`, `colors`

#### create_multiple_pies

Create multiple pie charts for comparison.

**Parameters:**
- `pies`: Array of {title, slices}
- `layout`: "horizontal" or "grid"

#### create_stacked_time_series

Create a stacked time series graph.

**Parameters:**
- `dates`: Date labels
- `series`: Array with name, values, color
- `style`: "stacked" or "percent"

#### create_signpost_chart

Create a signpost/direction chart.

**Parameters:**
- `directions`: Array with label, description, direction ("left"/"right"/"up"), color
- `centerText`: Optional base text

#### create_color_fan

Create a color fan chart.

**Parameters:**
- `items`: Array with name, color

#### create_folder_chart

Create a folder/filing cabinet chart.

**Parameters:**
- `folders`: Array with name, items (array of strings), color

#### create_bottle_chart

Create a bottle chart showing fill level.

**Parameters:**
- `fillPercent`: 0-100
- `fillColor`, `bottleStyle`: "bottle"/"jar"/"flask"

#### create_hamburger_chart

Create a hamburger-style layered diagram.

**Parameters:**
- `layers`: Array with name, description, color

#### create_ribbon_list

Create a ribbon-style numbered list.

**Parameters:**
- `items`: Array with title, description, color
- `style`: "ribbon"/"banner"/"tag"

#### create_leaf_chart

Create a leaf-shaped chart.

**Parameters:**
- `value`: 0-100
- `label`, `color`

#### create_growing_leaf

Create a growing leaf chart.

**Parameters:**
- `stages`: Array with name, value, color

#### create_idea_chart

Create a lightbulb/idea chart.

**Parameters:**
- `mainIdea`: Central idea text
- `relatedIdeas`: Array of related ideas

#### create_blowup_chart

Create a blow-up/zoom chart.

**Parameters:**
- `mainData`: Array with name, value, color
- `focusIndex`: Index of item to blow up
- `subItems`: Array of sub-item breakdowns

#### create_message_chart

Create a message/speech bubble chart.

**Parameters:**
- `message`: Quote text
- `author`: Attribution
- `style`: "speech"/"thought"/"quote"
- `backgroundColor`

#### create_thumbs_chart

Create a thumbs up/down chart.

**Parameters:**
- `thumbsUp`, `thumbsDown`: Counts
- `showPercentages`: Show percentage breakdown

#### create_puzzle_chart

Create a puzzle piece chart.

**Parameters:**
- `pieces`: Array with name, description, color
- `layout`: "2x2"/"1x4"/"2x3"

#### create_brain_chart

Create a brain diagram.

**Parameters:**
- `leftBrain`: Array of logic/analysis concepts
- `rightBrain`: Array of creativity/intuition concepts

#### create_human_body

Create a human body diagram.

**Parameters:**
- `highlights`: Array with region ("head"/"chest"/"abdomen"/etc.), label, color, value
- `showLabels`: Show region labels

#### create_birds_eye_funnel

Create a bird's eye view funnel.

**Parameters:**
- `stages`: Array with name, value, color
- `showPercentages`: Show conversion percentages

#### create_data_table

Create a styled data table.

**Parameters:**
- `headers`: Column headers
- `rows`: 2D array of cell data
- `highlightRules`: Conditional formatting rules

### Think-Cell Differentiator Tools

#### smart_paste_data

Update chart data while preserving formatting.

**Parameters:**
- `chartId`: ID of chart to update
- `newData`: Object with categories and series
- `preserveFormatting`: Keep existing colors/styles (default: true)

**Example:**
```json
{
  "chartId": "chart_abc123",
  "newData": {
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [{"name": "Revenue", "values": [100, 120, 115, 140]}]
  },
  "preserveFormatting": true
}
```

#### add_e_bridge

Add an E-Bridge between two bars in a waterfall chart.

**Parameters:**
- `chartId`: ID of waterfall chart
- `startBarIndex`: Starting bar index
- `endBarIndex`: Ending bar index
- `label`: Bridge label
- `showAbsolute`, `showPercent`: Display options

**Example:**
```json
{
  "chartId": "waterfall_xyz",
  "startBarIndex": 1,
  "endBarIndex": 4,
  "label": "Gap to Target",
  "showAbsolute": true,
  "showPercent": true
}
```

## Key Differentiators (vs. Vizzlo)

### 1. Smart Label Placement
- Mekko charts automatically move labels outside with connector lines when segments are too small
- Collision detection prevents overlapping labels

### 2. E-Bridges (Waterfall Enhancement)
- Select any two bars and add a bridge showing the delta
- Auto-calculates absolute and percentage change
- Updates automatically when data changes

### 3. Calendar Snapping (Gantt)
- Tasks snap to day/week/month/quarter boundaries
- Harvey balls provide at-a-glance progress indication
- Dependency arrows show task relationships

### 4. Data Continuity (Smart Paste)
- Paste from Excel/Sheets preserves existing formatting
- Update data without losing custom colors and styles
- Real-time sync with Google Sheets

### 5. Native Google Slides Shapes
- Charts render as native PageElements, not images
- Remain editable even without the add-on
- Better performance and smaller file sizes
- Uses batchUpdate for efficient API quota management

### 6. Complete Think-Cell Feature Parity
- CAGR arrows with auto-calculation
- Total and difference labels
- Value lines for targets/benchmarks
- Harvey balls for progress tracking
- Dual-axis combo charts

## Best Practices for AI Integration

1. **Data validation**: Always validate that data arrays have matching lengths
2. **Meaningful labels**: Use descriptive category and series names
3. **Appropriate chart types**: Match chart type to data structure:
   - Waterfall: Sequential changes
   - Mekko: Market share with variable column widths
   - Gantt: Time-based tasks with dependencies
   - BCG Matrix: Portfolio analysis
   - SWOT: Strategic analysis
   - Box Plot: Statistical distribution
   - Slopegraph: Before/after comparison
   - Combo: Revenue + margin analysis

4. **Annotations**: Use CAGR arrows for growth rates, value lines for targets
5. **Colors**: Use default colors for automatic palette, or specify custom colors

## API Endpoints

For direct API integration without MCP:

```
POST /api/charts/create
Content-Type: application/json

{
  "type": "waterfall",
  "data": { ... },
  "options": { ... }
}
```

## Support

- Documentation: https://slideschart.com/docs
- GitHub: https://github.com/slideschart
- Email: support@slideschart.com

## Technical Implementation Details

### Waterfall Chart SVG Engine
- Full connector lines between bars with dashed styling
- E-Bridge support with curved arrow paths and delta labels
- Auto-calculated running totals for start/end/increase/decrease/subtotal types
- Color-coded bars (green for increases, red for decreases, blue for totals)
- Value labels inside bars with white text, category labels below

### Mekko/Marimekko Chart SVG Engine
- Variable-width columns based on normalized width values
- Stacked segments with automatic percentage calculation
- **Smart Label Placement**: Labels inside segments when space allows
- **Connector Lines**: When segment is too small, label moves outside with connector line
- Width percentages displayed below category labels
- Y-axis with 0-100% scale

### Gantt Chart SVG Engine
- Calendar-based grid with day/week/month/quarter units
- Task bars with color-coded status (not-started, in-progress, completed, delayed, on-hold)
- Progress indicator bars within tasks
- **Harvey Balls**: Pie-chart style progress circles (0%, 25%, 50%, 75%, 100%)
- Dependency arrows showing task relationships
- Diamond milestone markers with labels
- Today line indicator
- Calendar snapping for drag operations

### Sankey Diagram SVG Engine
- Automatic node level assignment (sources at left, sinks at right)
- Proportional link widths based on flow values
- Curved Bezier paths for natural flow appearance
- Interactive tooltips showing source → target: value
- Node labels with value annotations
- Color inheritance from source nodes

## Version

Current version: 2.1.0
Last updated: January 2026
Total chart types: 105 (Full Vizzlo feature parity + think-cell differentiators)