Chart Generation API

Generate beautiful SVG charts and Lottie animations programmatically. Perfect for LLM integrations, automated reports, and embedding charts in your applications.

Base URL:https://screenshot2charts.com/api/v1

Quick Start

Generate a chart SVG with a single API call. No authentication required.

curl -X POST https://screenshot2charts.com/api/v1/charts/render \
  -H "Content-Type: application/json" \
  -d '{
    "chartData": {
      "title": "Monthly Revenue",
      "type": "bar",
      "xAxisKey": "month",
      "series": [{ "key": "revenue", "label": "Revenue ($)" }],
      "data": [
        { "month": "Jan", "revenue": 42000 },
        { "month": "Feb", "revenue": 48000 },
        { "month": "Mar", "revenue": 55000 }
      ]
    },
    "output": ["svg"]
  }'

Returns a JSON response with the SVG string in data.svg

Output Formats

All endpoints support multiple output formats. Specify which formats you want in the output array.

svgDefault

High-quality vector SVG. Perfect for web embedding, PDF generation, or further processing.

lottieAnimated

Lottie JSON animation at 60fps with spring-style bar/line animations. Use with lottie-web or lottie-react.

animatedSvgAnimated

SVG with embedded SMIL animations. Best used inline (<svg>) or via <object>/<iframe> (many browsers won't animate SMIL inside <img>).

Request Multiple Formats

{
  "chartData": { ... },
  "output": ["svg", "lottie", "animatedSvg"]
}

Response Structure

{
  "success": true,
  "data": {
    "chartData": { ... },
    "svg": "<svg width=\"800\" height=\"450\" ...>...</svg>",
    "lottie": {
      "v": "5.7.4",
      "fr": 60,
      "ip": 0,
      "op": 600,
      "w": 800,
      "h": 450,
      "nm": "Chart Title",
      "layers": [...]
    }
  }
}

Lottie Animation Details

Property	Value	Description
`v`	5.7.4	Lottie format version
`fr`	60	Frame rate (60fps)
`ip`	0	Start frame
`op`	600	End frame (10 seconds)
`w`	800	Width in pixels
`h`	450	Height in pixels

Playing Lottie Animations

Use the dotlottie-web library to play the Lottie JSON returned by the API.

Installation

npm install @lottiefiles/dotlottie-web

Usage

import { DotLottie } from '@lottiefiles/dotlottie-web';

// Fetch chart from API
const response = await fetch('https://screenshot2charts.com/api/v1/charts/render', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    chartData: { /* your chart data */ },
    output: ['lottie']
  })
});

const { data } = await response.json();

// Create player and load the Lottie data
const dotLottie = new DotLottie({
  canvas: document.getElementById('canvas'),
  data: data.lottie,  // Pass the lottie object directly
  autoplay: true,
  loop: true
});

HTML Canvas Setup

<canvas id="canvas" width="800" height="450"></canvas>

For React, Vue, or other frameworks, check out the LottieFiles documentation for framework-specific implementations and advanced options like playback controls, events, and theming.

Render Charts from Data

The fastest way to generate charts. Pass structured data and get back SVG and/or Lottie animations.

POST/charts/renderDirect chart rendering

Request Parameters

Parameter	Type	Required	Description
`chartData`	ChartData	Yes	Chart configuration object (see schema below)
`preset`	string	No	Styling preset: default, minimal, dark, etc.
`customization`	object	No	Override specific styling options
`output`	string[]	No	Output formats: ["svg"], ["lottie"], or both

Example: Multi-Series Bar Chart

{
  "chartData": {
    "title": "Quarterly Performance",
    "type": "bar",
    "xAxisKey": "quarter",
    "series": [
      { "key": "revenue", "label": "Revenue" },
      { "key": "profit", "label": "Profit" }
    ],
    "data": [
      { "quarter": "Q1", "revenue": 125000, "profit": 42000 },
      { "quarter": "Q2", "revenue": 148000, "profit": 51000 },
      { "quarter": "Q3", "revenue": 162000, "profit": 58000 },
      { "quarter": "Q4", "revenue": 195000, "profit": 72000 }
    ]
  },
  "preset": "default",
  "output": ["svg"]
}

Example: Line Chart

{
  "chartData": {
    "title": "User Growth",
    "type": "line",
    "xAxisKey": "month",
    "series": [
      { "key": "users", "label": "Active Users" },
      { "key": "signups", "label": "New Signups" }
    ],
    "data": [
      { "month": "Jan", "users": 1200, "signups": 340 },
      { "month": "Feb", "users": 1450, "signups": 420 },
      { "month": "Mar", "users": 1680, "signups": 380 },
      { "month": "Apr", "users": 1920, "signups": 510 }
    ]
  },
  "preset": "minimal",
  "output": ["svg"]
}

Example: Pie Chart

{
  "chartData": {
    "title": "Market Share",
    "type": "pie",
    "xAxisKey": "segment",
    "series": [{ "key": "value", "label": "Share %" }],
    "data": [
      { "segment": "Enterprise", "value": 45 },
      { "segment": "SMB", "value": 30 },
      { "segment": "Consumer", "value": 25 }
    ]
  },
  "output": ["svg"]
}

Response

{
  "success": true,
  "data": {
    "chartData": { ... },
    "svg": "<svg width=\"800\" height=\"450\" ...>...</svg>",
    "lottie": {
      "v": "5.7.4",
      "fr": 60,
      "ip": 0,
      "op": 600,
      "w": 800,
      "h": 450,
      "nm": "Chart Title",
      "layers": [...]
    }
  },
  "meta": {
    "preset": "default",
    "generatedAt": "2024-01-15T10:30:00.000Z",
    "rateLimit": {
      "remaining": { "hourly": 9, "daily": 29 }
    }
  }
}

Both SVG and Lottie are included when output: ["svg", "lottie"] is specified. Add "animatedSvg" to include SMIL-based animated SVG.

AI-Powered Generation

Generate charts from natural language prompts, images, CSV, or JSON data using AI. Returns SVG and/or Lottie animations.

POST/chartsAI chart generation

Request Parameters

Parameter	Type	Required	Description
`prompt`	string	No	Natural language description of the chart
`image`	object	No	{ "data": "base64...", "mimeType": "image/png" }
`csv`	string	No	CSV data as a string
`json`	array	No	Array of data objects
`chartType`	string	No	Force chart type: bar, line, area, pie
`preset`	string	No	Styling preset
`output`	string[]	No	Output formats: ["svg"], ["lottie"], or both

* At least one input (prompt, image, csv, or json) is required.

Example: From Prompt

{
  "prompt": "Show quarterly sales: Q1 $45K, Q2 $52K, Q3 $61K, Q4 $78K",
  "chartType": "bar",
  "output": ["svg", "lottie"]
}

Example: From CSV

{
  "csv": "month,revenue,costs\nJan,42000,28000\nFeb,45000,29000\nMar,48000,31000",
  "prompt": "Create a comparison chart showing revenue vs costs",
  "output": ["svg", "lottie"]
}

Example: From Image

{
  "image": {
    "data": "iVBORw0KGgoAAAANSUhEUgAA...",
    "mimeType": "image/png"
  },
  "prompt": "Recreate this chart with better styling",
  "output": ["svg", "lottie"]
}

Response

{
  "success": true,
  "data": {
    "chartData": {
      "title": "Quarterly Sales",
      "type": "bar",
      "xAxisKey": "quarter",
      "series": [{ "key": "sales", "label": "Sales ($)" }],
      "data": [
        { "quarter": "Q1", "sales": 45000 },
        { "quarter": "Q2", "sales": 52000 },
        { "quarter": "Q3", "sales": 61000 },
        { "quarter": "Q4", "sales": 78000 }
      ]
    },
    "svg": "<svg width=\"800\" height=\"450\" ...>...</svg>",
    "lottie": {
      "v": "5.7.4",
      "fr": 60,
      "ip": 0,
      "op": 600,
      "w": 800,
      "h": 450,
      "nm": "Quarterly Sales",
      "layers": [...]
    }
  },
  "meta": {
    "preset": "default",
    "generatedAt": "2024-01-15T10:30:00.000Z",
    "rateLimit": { "remaining": { "hourly": 9, "daily": 29 } }
  }
}

Presets

Presets control chart styling. Use GET /presets to list all available presets.

GET/presetsList available presets

Preset	Description	Best For
`default`	Title, legend, grid	General use
`minimal`	Chart only, no chrome	Embedding
`detailed`	Data labels, annotations	Reports
`dark`	Dark mode styling	Dark UIs
`presentation`	Large fonts, bold	Slides
`compact`	Small form factor	Dashboards
`financial`	Currency formatting	Financial data

ChartData Schema

The core data structure for defining charts.

TypeScript Interface

interface ChartData {
  title?: string;              // Chart title (optional)
  description?: string;        // Subtitle/description (optional)
  type: "bar" | "line" | "area" | "pie";
  xAxisKey: string;            // Key in data for X-axis labels
  series: ChartSeries[];       // Data series to display
  data: Record<string, any>[]; // Array of data points
}

interface ChartSeries {
  key: string;      // Key in data objects for values
  label: string;    // Display label for legend
  color?: string;   // Hex color, e.g. "#3b82f6" (optional)
}

Chart Types

bar

line

area

pie

Rate Limits

The API is rate limited per IP address. No authentication required.

requests per hour

requests per day

Response Headers

X-RateLimit-Limit-HourMax hourly requests

X-RateLimit-Remaining-HourRemaining this hour

X-RateLimit-Limit-DayMax daily requests

X-RateLimit-Remaining-DayRemaining today

Retry-AfterSeconds until reset (when limited)

Error Handling

All errors return a consistent JSON structure.

{
  "success": false,
  "error": {
    "code": "RATE_LIMITED",
    "message": "Rate limit exceeded. Retry after 3542 seconds",
    "details": {
      "retryAfter": 3542,
      "remaining": { "hourly": 0, "daily": 15 }
    }
  }
}

Error Codes

Code	HTTP	Description
`INVALID_REQUEST`	400	Malformed request body
`MISSING_INPUT`	400	No input provided
`INVALID_CHART_DATA`	400	Invalid ChartData structure
`INVALID_PRESET`	400	Unknown preset ID
`RATE_LIMITED`	429	Rate limit exceeded
`AI_GENERATION_FAILED`	500	AI failed to generate
`RENDER_FAILED`	500	Chart rendering failed

LLM Integration

Use this API with LLMs to generate charts from natural language. Here's how to integrate.

OpenAI Function Schema

{
  "name": "render_chart",
  "description": "Render a chart as SVG and/or Lottie animation from structured data",
  "parameters": {
    "type": "object",
    "properties": {
      "chartData": {
        "type": "object",
        "properties": {
          "title": { "type": "string" },
          "type": { "type": "string", "enum": ["bar", "line", "area", "pie"] },
          "xAxisKey": { "type": "string" },
          "series": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "key": { "type": "string" },
                "label": { "type": "string" }
              },
              "required": ["key", "label"]
            }
          },
          "data": { "type": "array" }
        },
        "required": ["type", "xAxisKey", "series", "data"]
      },
      "preset": {
        "type": "string",
        "enum": ["default", "minimal", "dark", "presentation"]
      },
      "output": {
        "type": "array",
        "items": { "type": "string", "enum": ["svg", "lottie", "animatedSvg"] },
        "default": ["svg"]
      }
    },
    "required": ["chartData"]
  }
}

Example Workflow

1. User Request

"Show me a bar chart of Q4 sales by product"

2. LLM Structures Data

{
  "chartData": {
    "title": "Q4 Sales by Product",
    "type": "bar",
    "xAxisKey": "product",
    "series": [{ "key": "sales", "label": "Sales ($)" }],
    "data": [
      { "product": "Widget A", "sales": 45000 },
      { "product": "Widget B", "sales": 32000 }
    ]
  }
}

3. Call API

POST /api/v1/charts/render

4. Display SVG

Render the returned SVG to the user

Tips for LLM Integration

✓Use /charts/render for deterministic output
✓Structure data yourself rather than relying on AI generation
✓Cache SVG/Lottie responses - same input produces same output
✓Handle rate limits with exponential backoff
✓Use Lottie output for animated presentations and interactive UIs
✓Request multiple formats with ["svg", "lottie", "animatedSvg"] to let users choose

Ready to start?

Try the API with a simple curl command or explore the web app.

Try Web App