API Documentation

Learn how to use the ChartAsImage API to convert your charts into high-quality images

Getting Started

Follow these steps to start using the API

Create an Account

Generate an API Token

After signing up, navigate to the API Tokens page to create a new token.

Make Your First Request

Use the examples below to make your first API call. Replace YOUR_API_TOKEN with your actual token.

API Endpoint

POST https://your-domain.com/api/charts/screenshot

All requests require authentication using a Bearer token in the Authorization header.

Chart Type Examples

Bar Chart

Perfect for comparing values across categories

curl -X POST https://your-domain.com/api/charts/screenshot \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "chartConfig": {
      "chartType": "recharts",
      "type": "bar",
      "title": "Monthly Sales Data",
      "data": [
        {"name": "Jan", "value": 400},
        {"name": "Feb", "value": 300},
        {"name": "Mar", "value": 200},
        {"name": "Apr", "value": 278},
        {"name": "May", "value": 189}
      ],
      "series": [
        {
          "dataKey": "value",
          "name": "Sales",
          "type": "bar",
          "fill": "#8884d8",
          "stroke": "#8884d8"
        }
      ],
      "styling": {
        "container": {
          "width": "90%",
          "height": "500px",
          "padding": "2rem"
        },
        "title": {
          "fontSize": "2rem",
          "fontWeight": "bold",
          "marginBottom": "2rem"
        },
        "colors": {
          "primary": "#8884d8",
          "secondary": "#82ca9d",
          "accent": "#ffc658"
        }
      },
      "config": {
        "margin": {"top": 20, "right": 30, "left": 20, "bottom": 5},
        "showGrid": true,
        "showLegend": true,
        "showTooltip": true,
        "xAxis": {"dataKey": "name", "label": {"text": "Month", "fontSize": 14, "fill": "#666", "offset": 10}},
        "yAxis": {"label": {"text": "Value", "fontSize": 18, "fill": "#666", "offset": -30}},
        "responsive": true
      }
    },
    "height": "500px",
    "width": "800px"
  }'

Line Chart

Ideal for showing trends over time

curl -X POST https://your-domain.com/api/charts/screenshot \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "chartConfig": {
      "chartType": "recharts",
      "type": "line",
      "title": "Revenue Over Time",
      "data": [
        {"month": "Jan", "revenue": 12000},
        {"month": "Feb", "revenue": 15000},
        {"month": "Mar", "revenue": 18000},
        {"month": "Apr", "revenue": 22000},
        {"month": "May", "revenue": 25000}
      ],
      "series": [
        {
          "dataKey": "revenue",
          "name": "Revenue",
          "type": "line",
          "stroke": "#82ca9d"
        }
      ],
      "styling": {
        "container": {"width": "90%", "height": "500px", "padding": "2rem"},
        "title": {"fontSize": "2rem", "fontWeight": "bold"},
        "colors": {"primary": "#82ca9d"}
      },
      "config": {
        "margin": {"top": 20, "right": 30, "left": 20, "bottom": 5},
        "showGrid": true,
        "showLegend": true,
        "xAxis": {"dataKey": "month", "label": {"text": "Month", "fontSize": 14, "fill": "#666", "offset": 10}},
        "yAxis": {"label": {"text": "Revenue ($)", "fontSize": 18, "fill": "#666", "offset": -30}}
      }
    },
    "height": "500px",
    "width": "800px"
  }'

Area Chart

Great for displaying cumulative values over time

curl -X POST https://your-domain.com/api/charts/screenshot \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "chartConfig": {
      "chartType": "recharts",
      "type": "area",
      "title": "User Growth",
      "data": [
        {"date": "2024-01", "users": 1000},
        {"date": "2024-02", "users": 1500},
        {"date": "2024-03", "users": 2200},
        {"date": "2024-04", "users": 3000},
        {"date": "2024-05", "users": 4000}
      ],
      "series": [
        {
          "dataKey": "users",
          "name": "Active Users",
          "type": "area",
          "fill": "#8884d8",
          "stroke": "#8884d8"
        }
      ],
      "styling": {
        "container": {"width": "90%", "height": "500px", "padding": "2rem"},
        "title": {"fontSize": "2rem", "fontWeight": "bold"},
        "colors": {"primary": "#8884d8"}
      },
      "config": {
        "margin": {"top": 20, "right": 30, "left": 20, "bottom": 5},
        "showGrid": true,
        "showLegend": true,
        "xAxis": {"dataKey": "date", "label": {"text": "Date", "fontSize": 14, "fill": "#666", "offset": 10}},
        "yAxis": {"label": {"text": "Users"}}
      }
    },
    "height": "500px",
    "width": "800px"
  }'

Pie Chart

Useful for showing proportions and percentages

curl -X POST https://your-domain.com/api/charts/screenshot \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "chartConfig": {
      "chartType": "recharts",
      "type": "pie",
      "title": "Market Share",
      "data": [
        {"name": "Product A", "value": 400},
        {"name": "Product B", "value": 300},
        {"name": "Product C", "value": 200},
        {"name": "Product D", "value": 100}
      ],
      "series": [
        {
          "dataKey": "value",
          "name": "Market Share",
          "type": "pie"
        }
      ],
      "styling": {
        "container": {"width": "90%", "height": "500px", "padding": "2rem"},
        "title": {"fontSize": "2rem", "fontWeight": "bold"},
        "colors": {
          "primary": "#8884d8",
          "secondary": "#82ca9d",
          "accent": "#ffc658"
        }
      },
      "config": {
        "margin": {"top": 20, "right": 30, "left": 20, "bottom": 5},
        "showLegend": true
      }
    },
    "height": "500px",
    "width": "800px"
  }'

Stripe-Style Chart

Built with Recharts and styled to match Stripe's beautiful design aesthetic

curl -X POST https://your-domain.com/api/charts/screenshot \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "chartConfig": {
      "chartType": "stripe",
      "type": "area",
      "title": "Monthly Recurring Revenue",
      "data": [
        {"month": "Jan 2024", "mrr": 12500, "formatted": "$12,500"},
        {"month": "Feb 2024", "mrr": 13800, "formatted": "$13,800"},
        {"month": "Mar 2024", "mrr": 15200, "formatted": "$15,200"},
        {"month": "Apr 2024", "mrr": 16800, "formatted": "$16,800"},
        {"month": "May 2024", "mrr": 18500, "formatted": "$18,500"}
      ],
      "series": [
        {
          "dataKey": "mrr",
          "name": "MRR",
          "type": "area",
          "fill": "url(#stripeGradient)",
          "stroke": "#635BFF"
        }
      ],
      "styling": {
        "container": {"width": "100%", "height": "400px", "padding": "1.5rem"},
        "title": {"fontSize": "1.5rem", "fontWeight": "600", "color": "#0A2540"},
        "colors": {"primary": "#635BFF", "secondary": "#00D4FF"}
      },
      "config": {
        "margin": {"top": 10, "right": 20, "left": 0, "bottom": 0},
        "showGrid": false,
        "showLegend": false,
        "showTooltip": true,
        "xAxis": {"dataKey": "month", "label": {"text": ""}},
        "yAxis": {"label": {"text": ""}}
      }
    },
    "height": "400px",
    "width": "800px"
  }'

Request Parameters

chartConfig (required)

The chart configuration object containing:

chartType: Either "recharts" or "stripe"
type: Chart type (bar, line, area, pie)
title: Optional chart title
data: Array of data points
series: Array of series configurations
styling: Styling options for the chart
config: Chart configuration (margins, axes, etc.)

config.xAxis.label

X-axis label configuration object with customization options:

{"text": "Month", "fontSize": 14, "fill": "#666", "offset": 10}

text: Label text
fontSize: Font size in pixels (default: 14)
fill: Text color (hex code, default: "#666")
offset: Vertical offset from axis in pixels (default: 10, positive moves down)

config.yAxis.label

Y-axis label configuration object with customization options:

{"text": "Value", "fontSize": 18, "fill": "#666", "offset": -30}

text: Label text
fontSize: Font size in pixels (default: 18)
fill: Text color (hex code, default: "#666")
offset: Horizontal offset from axis in pixels (default: -30, negative moves left)

height (required)

The height of the output image (e.g., "500px")

width (required)

The width of the output image (e.g., "800px")

Response

The API returns a JSON response with the image URL:

{
  "url": "https://your-domain.com/storage/charts/...",
  "name": "chart-screenshot.png"
}

Ready to Get Started?

Create an account to generate your API token and start creating charts.