Chart Rendering

Serverseitige PNG-Generierung aus Chart.js-Konfigurationen. Antwort ist image/png (kein JSON).

Endpoint

/api/chart/render (POST)

{
  "type": "line",
  "width": 800,
  "height": 320,
  "background": "#ffffff",
  "cornerRadius": 16,
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mrz",
      "Apr",
      "Mai",
      "Jun"
    ],
    "datasets": [
      {
        "label": "Umsatz",
        "data": [
          12,
          19,
          7,
          15,
          22,
          18
        ],
        "borderColor": "#2563eb",
        "backgroundColor": "rgba(37,99,235,0.25)",
        "fill": false,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "responsive": false
  }
}

curl -X POST "https://dev.nuvisphere.de/api/chart/render" \
  -H "Content-Type: application/json" \
  -H "x-api-key: API_KEY"
  -d '{
  "type": "line",
  "width": 800,
  "height": 320,
  "background": "#ffffff",
  "cornerRadius": 16,
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mrz",
      "Apr",
      "Mai",
      "Jun"
    ],
    "datasets": [
      {
        "label": "Umsatz",
        "data": [
          12,
          19,
          7,
          15,
          22,
          18
        ],
        "borderColor": "#2563eb",
        "backgroundColor": "rgba(37,99,235,0.25)",
        "fill": false,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "responsive": false
  }
}'

// server-side (Node/Next.js)
const res = await fetch("https://dev.nuvisphere.de/api/chart/render", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    "x-api-key": process.env.MAILER_API_KEY!,

  },
  body: JSON.stringify({
  "type": "line",
  "width": 800,
  "height": 320,
  "background": "#ffffff",
  "cornerRadius": 16,
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mrz",
      "Apr",
      "Mai",
      "Jun"
    ],
    "datasets": [
      {
        "label": "Umsatz",
        "data": [
          12,
          19,
          7,
          15,
          22,
          18
        ],
        "borderColor": "#2563eb",
        "backgroundColor": "rgba(37,99,235,0.25)",
        "fill": false,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "responsive": false
  }
}),
});
if (!res.ok) throw new Error(`Request failed ${res.status}`);
const json = await res.json();

API Key niemals im Browser verwenden – nur serverseitig (z. B. process.env.MAILER_API_KEY).
Lässt du optionale Felder weg, nutzt die API ggf. Template-/Defaultwerte.

Request

type: string (z. B. line, bar, pie)
width, height: number (px)
data: Chart.js Data‑Objekt
options: Chart.js Options‑Objekt (optional)
background: string (optional; CSS Farbe)
dpr|dpi: number (optional; 0.5–4)
cornerRadius, borderWidth, borderColor (optional)

Response

200 OK mit Content-Type: image/png. Beispiel zur Base64‑Weiterverarbeitung:

// Node/Next.js (Server)
const res = await fetch('https://dev.nuvisphere.de/api/chart/render', {
  method: 'POST', headers: { 'content-type': 'application/json' },
  body: JSON.stringify({
  "type": "line",
  "width": 800,
  "height": 320,
  "background": "#ffffff",
  "cornerRadius": 16,
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mrz",
      "Apr",
      "Mai",
      "Jun"
    ],
    "datasets": [
      {
        "label": "Umsatz",
        "data": [
          12,
          19,
          7,
          15,
          22,
          18
        ],
        "borderColor": "#2563eb",
        "backgroundColor": "rgba(37,99,235,0.25)",
        "fill": false,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "responsive": false
  }
})
});
const ab = await res.arrayBuffer();
const b64 = Buffer.from(ab).toString('base64');
const dataUrl = 'data:image/png;base64,' + b64;

Tipps

Feste Größe angeben (Breite/Höhe), kein Responsive nötig.
Abgerundete Kanten via cornerRadius.