Quick Start

Get your first chart in under 5 minutes.

1. Get your API key

Anonymous requests (no Authorization header) return 200 at starter limits — you can try the curl below without a key.

2. Make your first request

This is a full card render — header, chart, KPI strip, and footer composed into a single PNG. See Card Composition for the full field reference.

bash

curl -X POST https://chart-output.com/api/v1/render \
  -H "Authorization: Bearer pk_test_YOUR_KEY" \
  -H "Content-Type: application/json" \
  --output chart.png \
  -d @- <<'SPEC'
{
  "type": "line",
  "brandKitId": "obsidian",
  "width": 1200,
  "height": 840,
  "format": "png",
  "scale": 2,
  "padding": "email",
  "backgroundColor": "#0d1117",
  "borderRadius": 16,
  "border": { "color": "rgba(255,255,255,0.08)", "width": 1 },
  "header": {
    "eyebrow": "MONTHLY RECURRING REVENUE",
    "title": "$29,840",
    "subtitle": "↑ 16% from last month",
    "badge": {
      "text": "On track",
      "backgroundColor": "rgba(110,231,183,0.12)",
      "color": "#6ee7b7",
      "borderRadius": 6
    }
  },
  "legend": {
    "display": true,
    "position": "top",
    "style": "line",
    "fontSize": 11,
    "gap": 24
  },
  "theme": { "textPrimary": "#f0f6fc", "textSecondary": "#6e7681" },
  "data": {
    "labels": ["Jan","Feb","Mar","Apr","May","Jun"],
    "datasets": [
      {
        "label": "MRR",
        "data": [14200,17800,20100,22900,25720,29840],
        "borderColor": "#6ee7b7",
        "backgroundColor": "rgba(110,231,183,0.07)",
        "fill": true,
        "tension": 0.45,
        "borderWidth": 2.5,
        "pointRadius": [0,0,0,0,0,5],
        "pointBackgroundColor": "#ffffff",
        "pointBorderColor": "#6ee7b7",
        "pointBorderWidth": 2.5
      },
      {
        "label": "Target",
        "data": [15000,18500,21000,24000,27000,30000],
        "borderColor": "rgba(255,255,255,0.2)",
        "fill": false,
        "tension": 0.45,
        "borderWidth": 1.5,
        "borderDash": [5,4],
        "pointRadius": 0
      }
    ]
  },
  "options": {
    "scales": {
      "x": { "grid": { "display": false }, "border": { "display": false }, "ticks": { "color": "#6e7681" } },
      "y": { "grid": { "color": "rgba(255,255,255,0.05)" }, "border": { "display": false }, "ticks": { "color": "#6e7681" } }
    }
  },
  "kpiStrip": [
    { "label": "Customers", "value": "312", "color": "#f0f6fc" },
    { "label": "ARPU", "value": "$95.70", "color": "#f0f6fc" },
    { "label": "Churn", "value": "3.2%", "color": "#f59e0b" },
    { "label": "LTV", "value": "$2,990", "color": "#f0f6fc" }
  ],
  "footer": {
    "left": "chart-output.com",
    "right": "Generated Apr 2025",
    "borderTop": true
  }
}
SPEC

Node.js or Python (same JSON body)

import fs from 'fs';

const spec = JSON.parse(`
{
  "type": "line",
  "brandKitId": "obsidian",
  "width": 1200,
  "height": 840,
  "format": "png",
  "scale": 2,
  "padding": "email",
  "backgroundColor": "#0d1117",
  "borderRadius": 16,
  "border": { "color": "rgba(255,255,255,0.08)", "width": 1 },
  "header": {
    "eyebrow": "MONTHLY RECURRING REVENUE",
    "title": "$29,840",
    "subtitle": "↑ 16% from last month",
    "badge": {
      "text": "On track",
      "backgroundColor": "rgba(110,231,183,0.12)",
      "color": "#6ee7b7",
      "borderRadius": 6
    }
  },
  "legend": {
    "display": true,
    "position": "top",
    "style": "line",
    "fontSize": 11,
    "gap": 24
  },
  "theme": { "textPrimary": "#f0f6fc", "textSecondary": "#6e7681" },
  "data": {
    "labels": ["Jan","Feb","Mar","Apr","May","Jun"],
    "datasets": [
      {
        "label": "MRR",
        "data": [14200,17800,20100,22900,25720,29840],
        "borderColor": "#6ee7b7",
        "backgroundColor": "rgba(110,231,183,0.07)",
        "fill": true,
        "tension": 0.45,
        "borderWidth": 2.5,
        "pointRadius": [0,0,0,0,0,5],
        "pointBackgroundColor": "#ffffff",
        "pointBorderColor": "#6ee7b7",
        "pointBorderWidth": 2.5
      },
      {
        "label": "Target",
        "data": [15000,18500,21000,24000,27000,30000],
        "borderColor": "rgba(255,255,255,0.2)",
        "fill": false,
        "tension": 0.45,
        "borderWidth": 1.5,
        "borderDash": [5,4],
        "pointRadius": 0
      }
    ]
  },
  "options": {
    "scales": {
      "x": { "grid": { "display": false }, "border": { "display": false }, "ticks": { "color": "#6e7681" } },
      "y": { "grid": { "color": "rgba(255,255,255,0.05)" }, "border": { "display": false }, "ticks": { "color": "#6e7681" } }
    }
  },
  "kpiStrip": [
    { "label": "Customers", "value": "312", "color": "#f0f6fc" },
    { "label": "ARPU", "value": "$95.70", "color": "#f0f6fc" },
    { "label": "Churn", "value": "3.2%", "color": "#f59e0b" },
    { "label": "LTV", "value": "$2,990", "color": "#f0f6fc" }
  ],
  "footer": {
    "left": "chart-output.com",
    "right": "Generated Apr 2025",
    "borderTop": true
  }
}
`);

const res = await fetch('https://chart-output.com/api/v1/render', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.CHART_OUTPUT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(spec),
});
if (!res.ok) throw new Error(await res.text());
const buf = Buffer.from(await res.arrayBuffer());
await fs.promises.writeFile('chart.png', buf);

Produces a 1200×840 PNG at 2× retina (scale: 2); open the file:

bash

open chart.png

3. Embed in email

Use the GET endpoint with your API key as a query parameter. Browsers cannot send Authorization headers with image requests, so pass ?key=YOUR_API_KEY (alias: apiKey) in the URL instead.

html

<img
  src="https://chart-output.com/api/v1/render?key=YOUR_API_KEY&chart=BASE64_ENCODED_SPEC"
  alt="MRR chart"
  width="1200"
  height="840"
/>

Build the chart in the Playground and use Email embed for a ready-made URL. The chart parameter holds base64url-encoded JSON (alias c).

Next Steps

API Reference – Full endpoint docs
Card Composition – Card shell fields and examples
Email Integration – Email-specific guide
Chart Specifications – Chart types, formats, and dataset options

Questions? Email hello@chart-output.com